CSS Writing Mode

HTML
<div class="wrapper"> <div class="section"> <h2 class="section__title">CSS Writing Mode</h2> <div class="grid"> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> </div> </div> </div>
CSS
.wrapper { max-width: 700px; margin-left: auto; margin-right: auto; padding-top: 30px; } .section { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .section__title { -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; font-family: 'Arial'; font-size: 2.5em; font-weight: bold; width: 50px; } p { margin: 0 0 20px 0; } .grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .grid__item { -webkit-box-flex: 0; -webkit-flex: 0 0 48%; -ms-flex: 0 0 48%; flex: 0 0 48%; height: 150px; background: #e1e1e1; padding: 1.35em; box-sizing: border-box; margin-bottom: 1em; } .footer { text-align: center; margin-top: 20px; }
JAVASCRIPT
Expand for more options Login