There are three properties that define the explicit grid of a container. These are the grid-template-rows, grid-template-columns, and grid-template-areas. while these define the grid, the finished size might be larger, the result of items placed outside the explicit grid. If that happens, implicit tracks will be created and sized by grids-auto-rows and grid-auto-columns.
The grid property is shorthand and you can use it to set all three properties above at the same time.
Here is a list of Values to consider:
None: Here, no implicit grid tracks are created by this property.
<track-list> | <auto-track-list>: The track list is a series of track sizing functions and line names. Track sizing functions can be set as a length, a grid size percentage, a measurement of the inside of a column or row, or a portion of the empty space of a grid. It can also be defined as range, using minmax(). notation.
Figure 1.CSS: The Syntax of a Track List
<length-percentage>: This is a length or percentage, defined by CSS3 values.
<percentage>: Values relative to grid container size, column grid tracks, and the block size. If you measure a grid based on the size of the tracks, set the <percentage> to auto.
max-content: The largest max-content size of grid items in the grid track.
min-content: The largest min-content size of grid items in the grid track.
minmax(min, max): This is a size larger or equal to min and less than or equal to max.
auto: As a maximum, identical to max-content. As a minimum, represents the largest minimum size.
Note: auto track sizes can stretched by the align-content and justify-content properties.
repeat() notation: This is a fragment of the track list, which allows many columns or rows which have a recurring pattern to be written in a reduced form.
auto-fit: Acts in the same way as auto-fill, except that after grid item placement, all empty tracks are collapsed. This refers to no in-flow grid items.
named grid areas: Not associated with any grid item. The syntax offers a visualization of the structure of the grid, making the grid container easier to understand.
Flexible Lengths: the fr unit: This is a dimension with the fr unit. This is a part of the free space in a grid container.
The Basics
The Grid layout is a two-dimensional system which is designed to improve the way web pages are built. The grid system is meant to make life easier for designers. Here are some of the essential parts of a grid.
Grid Container: This is the parent of all grid items and where the grid is applied.
Grid lines: These are the horizontal and vertical lines of the grid and can exist on either side of a column or row.
Grid Track: This is the space between adjacent lines. Each grid track has a sizing function which controls the width or height.
Grid Cell: This is the intersection of a grid row and column. This is the smallest part of the grid.
Grid Areas: This the space used to lay out one or more grid items.
Prior to the grid system, authors discovered workarounds using JavaScript, carefully organized tables and/or floated elements to get the desired result. Unfortunately, many layouts did not function well.
The grid layout allows for dramatic changes without changes to the market. It combines media queries with CSS properties which control the layout of the grid container and the children. Authors can make their layouts work with several form factors, orientation, and space.
With the grid system, authors can precisely define the building block elements into the grid areas of intersections and rows.
The essential difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for use in one dimension. The Grid was designed for 2-dimensional layout. As you work with the new system, you will see that the two systems share common features, which will make Grid easier to learn.
As you can imagine, there are endless options for creating grids. They are only limited by your imagination. A best way of defining grids is by software, such as Bootstrap or Adobe Dreamweaver.
Figure 2.CSS: Creating a Grid
Above is a screen shot of a split view in Adobe Dreamweaver in which a grid has been created using a starter template. There are many reasons for using such grids. One reason it that it saves time. Secondly, if you are teaching yourself how to use grids, having samples on hand will make it easier that trying to create grid layouts from scratch. You can pull them apart at your leisure and not have to worry about damaging the original (assuming you make a copy).
About the Author
Nathan Segal has been working as a freelance writer for 18 years. In that time he has published more than 1,000 articles and has written 9 books. You can learn more about him at http://NathanSegal.org.
