Introduction to CSS Grid - CSS Grid Tutorial
CSS Grid is new layout supported browsers. If we compare to with Bootstrap then CSS Grid does not require to include any external libraries, By adding CSS rules to parent (Grid Container) and to child elements (Grid Items).
CSS Grid is a two-dimensional grid layout, we can work with columns and rows. In comparison to Flexboxes (which is one-dimensional), the CSS Grid layout system provides you to build more complex layouts. It is possible we can use both: Flexbox and Grid Layout in CSS
In Bootstrap Grid Layout system it’s much cleaner to define the layout structure in CSS only. You don't need to include layout definition within your codes. This makes the code easier to read and you are able to quickly adapt the layout if needed without needing to rearrange your code.
The grid container is the parent element of a grid layout system. The CSS rule display: grid needs to be applied to this container in order to active the CSS Grid layout mode.
Grid lines are the lines which define the structure of the grid and are dividing the grid into cells. Lines in a grid can be either vertically (dividing the grid into columns) or horizontally (dividing the grid into rows).
Each grid line has a unique number starting from 1 on the left side of the grid / on top of the grid. This line numbering is used to define grid area. You’ll see a practical example later on.
A grid cell is the smallest unit inside a grid and is the area between two adjacent column grid lines and two adjacent row grid lines.
Inside a grid, a grid area can be any area which is surrounded by four lines. Each area can comprise of any number of cells.
Any direct child elements of the parent grid container are called grid items.
Defining Grid Column And Rows
grid-template-columns / grid-template-rows
The next step is to define grid columns and rows. This is done by adding CSS properties grid-template-columns and grid-template-rows to the definition of class container:
Location of Grid Items
grid-column-start / grid-column-end / grid-row-start / grid-row-end
So far our example showed that the defined grid elements are put into the grid cells one by another. Each grid item is placed inside one grid cell. You can change the grid item’s location and define that a grid item should span across multiple grid cells by using CSS properties grid-column-start, grid-column-end, grid-row-start, and grid-row-end.
To specify the location with these properties we’re referring to specific grid lines. Remember the lines are automatically numbered starting by 1 (both in row and column direction).
Since the beginning of 2017 CSS Grid layout support has been shipped with the public released of all majors browsers like Firefox, Chrome, Opera, and Safari.
The IE/Edge version of the specification is prefixed with an -ms prefix and the properties implemented in IE/Edge. This means that the default CSS property names like:
grid-template-columns needs to be changed in IE/Edge to: -ms-grid-columns