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

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

Ohans Emmanuel
Apr 9, 2017 · 4 min read
Image for post
Image for post

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

<ul>
<li>List One</li>
<li>List Two</li>
<li>List Three</li>
</ul>
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;
}
Image for post
Image for post
Basic setup
ul {
margin-top: 50px;
}
Image for post
Image for post
The unordered list moves down after applying a top margin
li:first-child {
margin-top: 20px;
}
Image for post
Image for post
The distance from the top does NOT change
/* add this */
ul {
display: grid
}
Image for post
Image for post
The first list item’s top spacing is now evident.

2. Floated Elements do NOT slide under a Grid Container

<div>
<p></p>
<p></p>
</div>
<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>
body {
color: black;
background-color: #789090;
}
div {
background-color: #fff;
}
Image for post
Image for post
Basic setup
p:first-child {
background-color: red;
float: left;
}
Image for post
Image for post
Block containers ‘slide under’ floated elements
display: grid
Image for post
Image for post
Grid containers do NOT slide under floated elements

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

Want to become Pro?

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

Flexbox and Grid

Want to master Flexbox or the CSS Grid? Get in Line!

Ohans Emmanuel

Written by

I build complex frontends. I’m passionate about teaching intricate subjects e.g.https://leanpub.com/reintroducing-react. Now writing here: www.ohansemmanuel.com

Flexbox and Grid

Want to master Flexbox or the CSS Grid? Get in Line!

Ohans Emmanuel

Written by

I build complex frontends. I’m passionate about teaching intricate subjects e.g.https://leanpub.com/reintroducing-react. Now writing here: www.ohansemmanuel.com

Flexbox and Grid

Want to master Flexbox or the CSS Grid? Get in Line!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store