CSS Grid Layout: 3 Vital Differences between Grid Containers & Block Containers

Here are 3 vital differences between Grid containers and Block containers…

1. The Margins of a Grid container do NOT collapse with those of its descendants

Consider, the unordered list below:

<ul>
  <li>List One</li>
  <li>List Two</li>
  <li>List Three</li>
</ul>

For visual aid, style the unordered list:

body {
  color: #fff;
  background-color: #78909C;
  padding: 0;
  margin: 0;
}
ul {
  background-color: #8cacea;
  padding: 0;
  margin: 0;
}
li {
  background-color: black;
  border: 1px solid red;  
}

There are 2 things to note.

1. The document body has NO padding or margin applied.
2. The unordered list, ul has NO padding or margin applied too.

Here is what this looks like now:

Basic setup

The list elements are in black — very obvious. As you can see there are NO paddings or margins at this moment.

So, give the unordered list a top margin of 50px and notice how the element drops.

ul {
  margin-top: 50px;
}

The unordered list moves down after applying a top margin

As expected, there is now a top spacing before the unordered list.

Give the first list item li a top margin of 20px. What do you think happens?

li:first-child {
  margin-top: 20px;
}

Well, nothing happens. The element does NOT move further down.

The distance from the top does NOT change

This is because the top margin of the first unordered list was collapsed with that of the first list item.

This is the default behavior of every block element in CSS, but this is NOT so with Grid containers.

To notice the difference, make the unordered list a Grid container.

/* add this */
ul {
  display: grid
}

Once you do, the list element drops down.

The first list item’s top spacing is now evident.

The unordered list ul has a background color of white — it’s an obvious one to help you identify the list liitem’s top spacing.

2. Floated Elements do NOT slide under a Grid Container

Consider the markup below. It contains a div with two paragraphs.

<div>
  <p></p>
  <p></p>
</div>

Fill the paragraphs with texts. The second paragraph with a lot more text.

<div>
  <p>
    This is a small paragraph
  </p>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec           vel dui condimentum, pharetra diam id, luctus leo. Donec id arcu et dui pharetra suscipit. Duis malesuada feugiat pharetra. Aenean id mauris vitae elit ullamcorper molestie a a erat. Suspendisse pellentesque dapibus eros vitae euismod. Vestibulum vitae eleifend turpis. Sed eleifend porttitor nisi, ut condimentum tortor pellentesque et. Nam porta risus tellus. Mauris sapien dolor, tempor non viverra mollis, venenatis vehicula leo. Maecenas facilisis ultricies nulla, at condimentum nisi pulvinar vitae. Curabitur facilisis sapien accumsan rutrum maximus. In et faucibus nibh. Donec consequat ipsum ut mauris condimentum vestibulum. In hac habitasse platea dictumst. Suspendisse pulvinar fringilla urna, eu rutrum urna malesuada in.
</p>
 </div>

You need a bit of styling for visual aid

body {
  color: black;
  background-color: #789090;
}
div {
  background-color: #fff;
}

Here’s the result:

Basic setup

To understand the different effects floats have on block elements and grid containers, style the first paragraph as shown below:

p:first-child {
  background-color: red;
  float: left;
}

Here’s what you should have after the paragraph to the left:

Block containers ‘slide under’ floated elements

Did you see that?

The paragraph with a lot more text slides under the floated paragraph.

With grid containers, the behavior is different.

To investigate this, make the paragraph with a lot more text a grid container.

display: grid

Here’s the result:

Grid containers do NOT slide under floated elements

Grid Containers do NOT slide under floated elements.

3. Some CSS properties do NOT apply to a grid container

There are a few CSS properties that do NOT apply to a grid container and(or) grid item. Some of these include:

(i) float and clear

(ii) All column properties e.g column-count

(iii) The ::first-line and ::first-letter pseudo-elements

(iv) The vertical-align property

All of these properties will NOT work when applied on a grid container.

Congratulations 🥇. Now you know the vital differences between Grid containers and Block containers.

I know you loved this article, so recommend it and help someone else learn something new.

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get the Free CSS Grid Cheat sheet + Two Quality Flexbox Courses for free!

Get them now