Css Grid Layout - A Short Introduction - Part 1
- 1. CSS GRID LAYOUT A S H O R T I N T R O D U C T I O N – PA R T 1
- 2. WHAT IS IT? • CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to layout major page areas or small user interface elements. • A grid is an intersecting set of horizontal and vertical lines – one set defining columns and the other rows. Elements can be placed onto the grid, respecting these column and row lines. • CSS Grid can handle both columns and rows, unlike flexbox which is largely a 1- dimensional system.
- 3. FEATURES • You can create a grid with fixed columns and rows sizes – using pixels or 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. Grid also contains an algorithm to control the placement of items not given an explicit position on the grid. • Grid contains alignment features so that we can control how the items align once placed into a grid area, and how the entire grid is aligned.
- 4. A BIT OF HISTORY • CSS has always been used to lay out our web pages, but it's never done a very good job of it. • First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). • Flexbox helped out, but it's intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). • Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites. • The beginnings of CSS Grid date back to 2011 and a proposal sent to the CSS Working Group from Microsoft. • On October 2017, Microsoft’s Edge browser shipped its implementation of CSS Grid. It means that all major browsers now support this layout tool. All major browsers rolled out their implementations in a single year.
- 5. BROWSER SUPPORT * Partial support in IE10 & IE11 with prefix -ms-. It's an old implementation with an outdated syntax.
- 6. TERMINOLOGY • Grid Container • Grid Item • Grid Tracks • Grid Cell • Grid Area • Grid Line • Gutters • Fraction Unit • Implicit/Explicit Grid
- 7. GRID CONTAINER • The element on which display: grid is applied. It's the direct parent of all the grid items. In this example container is the grid container.
- 8. GRID ITEM • The children (e.g. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn't.
- 9. GRID TRACKS • We define rows and columns on with the grid-template-columns and grid-template- rows properties. These define grid tracks. A grid track is the space between any two lines on the grid.
- 10. GRID CELL • The space between two adjacent row and two adjacent column grid lines. It's a single "unit" of the grid.
- 11. GRID AREA • The total space surrounded by four grid lines. A grid area may be comprised of any number of grid cells. Items can span one or more cells both by row or by column. • Grid areas must be rectangular – it isn’t possible to create an L-shaped area for example.
- 12. 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. 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 2nd Row Line 3rd Column Line
- 13. GUTTERS • Gutters between grid cells can be created using the column-gap and row-gap properties, or the shorthand gap which takes row-gap and column-gap • They only appear between tracks of the implicit grid; there is no gutter before the first track or after the last track.
- 14. REPEAT FUNCTION • Large grids with many tracks can use the repeat() notation, to repeat all or a section of the track listing. grid-template-columns: 100px 100px 100px; === grid-template-columns: repeat(3, 100px); grid-template-columns: 100px 200px 100px 200px; === grid-template-columns: repeat(2, 100px 200px);
- 15. FRACTION UNIT • Tracks can be defined using any length unit (pixels, percentages, em etc…) • The fr unit allows you to set the size of a track as a fraction of the free space of the grid container.
- 16. IMPLICIT AND EXPLICIT GRID • We defined our column tracks with the grid-template-columns property, but the grid also created rows on its own. These rows are part of the implicit grid. • Whereas the explicit grid consists of any rows and columns defined with grid- template-columns or grid-template-rows.
- 17. GRID ALIGNMENT • Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px • In this case you can set the alignment of the grid within the grid container. • justify-content aligns the grid along the inline (row) axis • align-content aligns the grid along the block (column) axis
- 18. JUSTIFY-CONTENT start end center stretch space-around space-between space-evenly
- 19. ALIGN-CONTENT start end center stretch space-around space-between space-evenly
- 20. MINMAX • Defines a size range for tracks • Takes two parameters, min and max • They can be pixels, percentages, fr, max-content and min-content • max-content – doesn‘t break the content • min-content – breaks the content
- 21. WHAT’S NEXT? • Grid areas • Aligning grid items in a grid • Aligning grid items inside cells • How to control implicit grid tracks • How to control auto-placement algorithm • Animating grid properties • How to deal with IE
- 22. RESOURCES • CSS Grid Layout Module Level 1 Editor’s Draft • The Story of CSS Grid, from Its Creators • Microsoft’s initial proposal of the grid • Basic concepts of grid layout • A Complete Guide to Grid • CSS Grid Layout Support • How the minmax function works