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
Child Properties


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.
Keep CSSing 🎈
One thought on “Display: Grid in CSS explained”