Display: Grid in CSS explained

This shorthand guide to CSS Grid focuses on major settings required for an efficient grid parent container and the grid child container.

Grid is known to be 2-directional systems. It can handle columns as well as rows. This is different from Flexbox which is used for 1-directional systems. This 2-directional system helps you get a better design control over the CSS elements on the web page or app.

Grid is supported by all the new age desktop, tablets and mobile browsers.

Grid goes well with Media Queries for different viewports/displays. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.

Parent Properties

.container {
display: grid | inline-grid;
}
view raw grid.css hosted with ❤ by GitHub
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
view raw grid.css hosted with ❤ by GitHub
.container {
grid-template-areas: " | . | none | …" "…";
}
view raw grid.css hosted with ❤ by GitHub
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer";
}
view raw grid.css hosted with ❤ by GitHub

Child Properties

This is a 5 Columns and 4 Rows Grid
.item {
grid-area: <rowstart> / <columnstart> / <rowend> / <columnend>;
}
view raw grid.css hosted with ❤ by GitHub
.item {
grid-area: 2 / 3 / 3 / 4;
}
view raw grid.css hosted with ❤ by GitHub
Code for placing an item at a certain place in Grid

justify-self is used when aligning items along horizontal axis. While align-self aligns item along the vertical axis. One easiest way to remember this, as mentioned here, is to pay attention to the name.

justify-self ( justify-items in the case of flexbox) is for horizontal alignment of items. align-self ( align-items in flexbox ) is for vertical alignment.

.item {
justify-self: start | end | center | stretch;
}
view raw grid.css hosted with ❤ by GitHub
.item {
align-self: start | end | center | stretch;
}
view raw grid.css hosted with ❤ by GitHub
.item-a {
place-self: center;
}
view raw grid.css hosted with ❤ by GitHub
.item-a {
place-self: center stretch;
}
view raw grid.css hosted with ❤ by GitHub

Keep CSSing 🎈

Published by Jayesh Tiwari

I code and energize, loves sharing my journey.

One thought on “Display: Grid in CSS explained

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s