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;
}
