<< View All Computer Tips

Added On: 10/04/20   |    Category: CSS    |    Number of Views: 172

Using CSS grids to create a simple grid layout    

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>