CSS grid can make webpage layouts so simple.

The simplest CSS modular can be achieved easily using CSS grid, with its flexibility and possibilities.

When I design web pages, I always try to find the simplest CSS modular as webpages should be light and shouldn’t take too long to load. However it hasn’t always been an easy task especially when columns as colour blocks have different heights. This kind of problems can be solved quite simply with CSS grid.

CSS grid behaves somewhat like ‘table’ with its child elements becoming like ‘table-cell’, but comes with a flexibility for responsive layouts. For the responsive layouts ‘table’ is not flexible enough to change its rules on the number of columns and rows. With CSS grid, this can be overcome easily.

Now implemented in MS browser Edge, I think I am going to use CSS grid more and more.

I would like to show you how to set up the simple CSS grid using a 3 column example, then compare the difference between ‘display:grid’ and ‘display:inline-grid’ after.

Let’s write HTML contents first.

1
2
3
4
5
6
7
8
<div class="grid_items">
  <div class="grid_item">A</div>
  <div class="grid_item">B</div>
  <div class="grid_item">C  <br>Lorem ipsum dolor sit amet. <br>Consectetuer adipiscing elit.</div>
  <div class="grid_item">D</div>
  <div class="grid_item">E <br>Lorem ipsum dolor sit amet. <br>Consectetuer adipiscing elit. <br>Cum sociis natoque penatibus et magnis dis parturient montes. <br>nascetur ridiculus mus.</div>
  <div class="grid_item">G</div>
</div>

I have input longer texts for the ‘grid_item C’ and ‘grid_item E’ to demonstrate how the height of each item displays.

Now let’s apply the simple CSS grid to the HTML elements.

1
2
3
4
5
6
7
8
9
10
11
12
.grid_items {
  padding: 3.75%;
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-column-gap: 5%;
  grid-row-gap: 50px;
}
.grid_item {
  color: white;
  background-color: grey;
  padding: 5%;
}

The result will look like below.

CSS grid example image

So simple but so effective. All columns in a same row have same heights just like ‘table-cell’ elements, but the number of columns and rows can be flexible for different screen sizes. This is amazing.

What’s the difference between ‘display: grid’ and ‘display: inline-grid;’? The difference is same as between ‘display: block’ and ‘display: inline-block’. Check out the differences here at my CodePen page.

See the Pen CSS Grid Basic – grid vs. inline-grid by Web Made Well (@webmadewell) on CodePen.32161

I am going to demonstrate how the number of columns and rows can change by screen sizes in the next article.