<h2>Aligning Content Along Column Axis</h2>
<div class="container">
<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>
<div class="item e">E</div>
<div class="item f">F</div>
<div class="item g">G</div>
<div class="item h">H</div>
<div class="item i">I</div>
<div class="item j">J</div>
<div class="item k">K</div>
<div class="item l">L</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 10px auto;
width: 700px;
font-family: 'Lato';
text-align: center;
}
h2 {
margin: 25px;
margin-bottom: 50px;
font-size: 2em;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 120px 120px 120px 120px;
grid-gap: 10px;
font-family: 'Lato';
text-align: center;
font-size: 1.4em;
margin: 40px 30px;
}
.item {
padding: 20px 40px;
font-size: 1.5em;
border: 1px solid black;
}
.a, .b, .c {
background: orange;
align-self: start;
}
.d, .e, .f {
background: violet;
align-self: end;
}
.g, .h, .i {
background: lightgreen;
align-self: center;
}
.j, .k, .l {
background: cornflowerblue;
align-self: stretch;
}
This Pen doesn't use any external JavaScript resources.