What is the CSS Grid Layout Module?
According to the W3C Working Draft, The CSS Grid Layout module “defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout module, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.”
In Plain English, CSS Grid lets us draw a grid inside any container and place content wherever you want within that grid, independent of the current semantic structure. In short, CSS Grid gives us the power of classic print-based grid layout systems with the flexibility of responsive web design.
When can we start using CSS Grid?
The short answer is, “Not yet but soon”. Checkout Can I use CSS Grid?
- Originally proposed by Microsoft in April 2011 and has been available in Internet Explorer 10/11 and Edge 12/13/14 (old spec)
- Chrome (with experimental feature enabled)
- Firefox (with experimental feature enabled)
CSS Grid: The Basics
CSS Grid Terminology
Grid
- Any element with its display property set to grid
- Grids have rows and columns
Grid Line
- A Grid Line is the line that makes up the grid. They can be horizontal or vertical or can be referred to by number or name.
- The column lines are counted based on the direction of the defined language. So if a page is set to left to right language, the count is left to right for column lines. If the language is right to left the count is from right to left as well.
Grid Track
- A Grid Track is the space between two grid lines. The grid tracks can be either horizontal or vertical representing rows or columns.
Grid Cell
- A Grid Cell is the space between four grid lines top, right, bottom and left.
Grid Area
- A Grid Area is any area within the grid defined by its four outermost grid lines. A grid area may cover multiple lines and contain multiple cells.
Grid Gutters
- Grid Gutters are the defined space between rows and columns.
- Upcoming feature not currently supported in browsers.
How to use the experimental CSS Grid features in Chrome
Because the CSS Grid layout module is an experimental module still in working draft, there is no support for this feature in normal browsers. Support for CSS Grid can be enabled in Chrome and Firefox from the backend. To turn CSS Grid support on in Chrome, first open the browser and then, visit the following URL, chrome://flags. Search for web platform and you will find Enable Experimental Web Platform Features, which include CSS Grid.