Category: CSS

Added: 10th of April 2020

Updated On: 3rd of October 2020

Viewed: 371 times

Using CSS grids to create a simple grid layout

This article was rechecked and updated on 03/10/20

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.

<style>
.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
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">


Other Tips & Tutorials

CSS

Using CSS grids to create a simple grid layout

Posted: 10th of April 2020

Views: 371

CSS

Simple CSS responsive menu for websites and mobile devices

Posted: 26th of January 2016

Views: 1021