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

	.item {
	grid-area: <row–start> / <column–start> / <row–end> / <column–end>;
	}

view raw grid.css hosted with ❤ by GitHub

	.item {
	grid-area: 2 / 3 / 3 / 4;
	}

view raw grid.css hosted with ❤ by GitHub

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 🎈