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.
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-itemsin the case of flexbox) is for horizontal alignment of items.
align-itemsin flexbox ) is for vertical alignment.
Keep CSSing 🎈