CSS Grid, the new CSS trend in 2018
1. CSS Grid:
a. Introduction:- It is two dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.
- Evolution: Table -> Float -> Flexbox (one-dimension) -> CSS Grid (two dimension)
- It is currently a W3C Candidate Recommendation despite already being adopted by most major browsers.
b. Browser support:
- Grid Container: The element on which
display: grid || inline-grid is applied. It's the direct parent of all the grid items.
display: grid || inline-grid is applied. It's the direct parent of all the grid items.
.grid-container {
display: grid;
}
.grid-container {
display: grid;
}
- Grid Item: The children (e.g. direct descendants) of the grid container. Here the
itemelements are grid items, butsub-itemisn't. - Grid Line: The dividing lines that make up the structure of the grid. They can be either vertical ("column grid lines") or horizontal ("row grid lines") and reside on either side of a row or column. Here the yellow line is an example of a column grid line.
- Grid Track: The space between two adjacent grid lines. You can think of them like the columns or rows of the grid. Here's the grid track between the second and third row grid lines.
- Grid Cell: The space between two adjacent row and two adjacent column grid lines. It's a single "unit" of the grid. Here's the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.
- Grid Area: The total space surrounded by four grid lines. A grid area may be comprised of any number of grid cells. Here's the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.
- The Fr Unit: Fr is a fractional unit and 1fr is for 1 part of the available space.
2. Difference between FlexBox and Grid:
- Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.- Do you want to define a grid, and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using line-based positioning or grid template areas. That’s grid.
Example:
- Table: https://www.w3schools.com/code/tryit.asp?filename=FNGNOSJ8R5RG
- Float: https://www.w3schools.com/code/tryit.asp?filename=FN0JCRKRX5CQ
- Flexbox: https://www.w3schools.com/code/tryit.asp?filename=FN0JEBHEIYH3
- Grid: https://www.w3schools.com/code/tryit.asp?filename=FN0JEXIDSDWX
3. Going Responsive:
Inside media queries we can redefined where items sit on the grid.
- Mobile:
- Screen width >= 500px:
- Screen width >= 800px:
Full example: https://codepen.io/rachelandrew/pen/QKwvxJ?editors=1100
4. Old browser support:
- If using display: grid on a container, child items:- Using float, lose their float behavior.
- The vertical-align property has no effect.
- Flex items become grid items.
- Items set to display: block or inline-block become grid items.
- Items set to display: table-cell stop creating anonymous boxes.
- Grid “fallbacks” and overrides:
- Flexbox
- Floated items: https://codepen.io/pen/?editors=1100#0
- display: inline-block or table-cell + vertical-align property
- Multi-column layout properties (column-count)
- Using Feature Queries: (@support)
- Supports all browsers which also support CSS Grid.
- Overrides inside @suppport are mostly widths and margins.
- Example: https://codepen.io/anon/pen/NyzmMV?editors=1100#0
Useful Resources:
https://www.youtube.com/watch?v=tjHOLtouElAhttps://css-tricks.com/snippets/css/complete-guide-grid/
https://drafts.csswg.org/css-grid/
Comments
Post a Comment