Using CSS grids to create a simple grid layout
ID: 150
Category: CSS
Added: 10th of April 2020
Updated On: Tutorial updated and rechecked on 11th of December 2023
Views: 2,470
If you have ever tried to code a row of responsive boxes in CSS, you understand the difficulty of trying to create the right balance between the amount of characters entered and making the sure the height of the boxes remain uniformed.
You can set a fixed height in CSS using height: (x)px;, but then you need to limit the amount of characters entered in to each box.
You can also use overflow:hidden;, which expands each box individually depending on the amount of characters entered, but if the boxes wrap to the next line they lose alignment messing up your design.
To solve this problem with can use CSS grids. The simple script below outputs 8 equally spaced boxes using different sizes of text. The boxes fit any screen size including mobile.
You can view the demo script on the link below.
http://www.my computertips.co.uk/article_demos_150.html
Copy and paste the code below for your own projects. The code below displays 3 boxes in a row, then continues on the next line.
.box_grid {
display: grid;
grid-column-gap: 5px;
grid-row-gap: 5px;
grid-template-columns: 33% 33% 33%;
}
.box_grid_content {
width:100%;
padding:10px;
box-sizing: border-box; border:2px dotted black;
}
@media only screen and (max-width: 600px) {
.box_grid {
grid-row-gap: 5px; grid-template-columns: 100%; background: white;
}
}
</style>
<h1 style="text-align:center;">Simple CSS grids</h1>
<div class="box_grid">
<div class="box_grid_content">
<h1>Box 1</h1>
<p style="font-size:20px;">WYSIWYG, What You See Is What You Get</p>
</div>
<div class="box_grid_content">
<h1>Box 2</h1>
<p style="font-size:40px;">WYSIWYG, What You See Is What You Get</p>
</div>
<div class="box_grid_content">
<h1>Box 3</h1>
<p style="font-size:20px;">WYSIWYG, What You See Is What You Get</p>
</div>
<div class="box_grid_content">
<h1>Box 4</h1>
<p style="font-size:40px;">WYSIWYG, What You See Is What You Get</p>
</div>
<div class="box_grid_content">
<h1>Box 5</h1>
<p style="font-size:20px;">WYSIWYG, What You See Is What You Get</p>
</div>
<div class="box_grid_content">
<h1>Box 6</h1>
<p style="font-size:40px;">WYSIWYG, What You See Is What You Get</p>
</div>
<div class="box_grid_content">
<h1>Box 7</h1>
<p style="font-size:20px;">WYSIWYG, What You See Is What You Get</p>
</div>
<div class="box_grid_content">
<h1>Box 8</h1>
<p style="font-size:40px;">WYSIWYG, What You See Is What You Get</p>
</div>
</div>
Don't forget to add the following meta tag, so the boxes work when viewed on mobile devices
