The Ultimate Guide To CSS Grid

During the last two months I’ve been taking a deeper look into CSS Grid. In this tutorial I want to share the key findings. To make things easier, I explained them using visual diagrams.

CSS Grid Anatomy is composed of the primary container which is just your standard <div> element that has a margin, border and padding. To make a parent CSS grid container out of any element add display: grid to it. Grid’s items are children nested inside the parent container. They are usually defined as a list of elements that could represent a header, sidebar, footer or similar website layout elements, depending on your application design.
div#grid {               /* This is our CSS grid parent container */
display: grid;
grid-template-columns
: 100px 100px 100px 100px 100px; /* 5 cols */
grid-template-rows: 100px 100px 100px 100px; /* 4 rows */
}
Some of the first things you will notice about the CSS grid behavior.
Using grid-auto-flow: row or grid-auto-flow: column to determine flow direction of the grid’s items.

Implicit and Explicit Content Placement

Automatic Spacing

CSS Grid Gaps

FR units (Fractional Units)

Behavior of fractional units (fr unit) changes based on all values provided in either dimension.

Fractional Units And Their Relationship To Gaps

Here we added gaps to cells specified using fr units.

Content Placement

Cell Content Spanning

Spanning using grid-column and grid-row

Spanning using grid-column-start…

Type these properties directly into the item you wish to be affected by them.

min-content and max-content

Images and max-content

Content Positioning

Multi-directional 360° float

Align Self (align-self)

Justify Self (justify-self)

Template Areas

Practical Example of CSS Grid Template Areas

Naming Lines

In Conclusion

Limited Time Offer

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

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