CSS Grid Basics
CSS Grid Layout brings a two-dimensional grid system to CSS. Grids can be used to layout major page areas or small user interface elements. This is similar to the Column and Row setup that many Bootstrap users are familiar with. In this blog, I’ll go over the basics of the CSS grid and how to begin familiarizing yourself with it.
What is the grid?
A grid is a set of intersecting horizontal and vertical lines defining columns and rows. Elements can be placed onto the grid within these column and row lines. You can create a grid with fixed track sizes, using pixels for example. This sets the grid to the specified pixel which fits the layout you desire. You can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose. You can place items into a precise location on the grid using line numbers, names, or by targeting an area of the grid. The grid also contains an algorithm to control the placement of items not given an explicit position on the grid. You are able to define a clear cut grid with a grid layout. The grid layout is flexible enough to add additional rows and columns when needed. You can even combine these layout models. You can use a Flexbox container inside a CSS Grid container but you cannot implement it vice-versa.
The grid contains alignment features so you can control how the items align once placed into a grid area, and how the entire grid is aligned. More than one item can be placed into a grid cell or area and, they can partially overlap each other. This layering may then be controlled with the z-index property.
Grid is a powerful specification that, when combined with other parts of CSS such as flexbox, can help you create layouts that were previously impossible to build in CSS. It all starts by creating a grid in your grid container.
Most modern web browsers now support both CSS Grid. The images below show a detailed analysis of browser support for Grid but if you want your content to be consistent across all browsers, you may consider writing some more lines of CSS with help of the following articles for each layout model.
