July 18, 2020
Let's see how to do the grid layout.
Literally, the grid layout is grid. You can put elemnts on each box which is called "track".
<body>
<div class="grid-box">
<div class="grid-item">Hello</div>
<div class="grid-item">Hello</div>
<div class="grid-item">Hello</div>
<div class="grid-item">Hello</div>
<div class="grid-item">Hello</div>
<div class="grid-item">Hello</div>
</div>
</body>
.grid-box {
width: 480px;
display: grid;
gap: 5px;
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
.grid-item {
border: 1px solid black;
width: 100%;
}
minmax is for setting min and max width for each track. "fr" is 1 track width.
Of course, you can change how many times repeating for each device by using media query. So, it is easy to support with responsible design.
@media screen and (max-width: 480px) {
.grid-box {
grid-template-columns: repeat(1, minmax(200px, 1fr));
}
}
Written by Yasuhiro Ito
Software engineer