Developer Expert ▸ co-founder Perch CMS ▸ Old Nerd. ▸ You can find me in most places as @rachelandrew you can email [email protected] or check out my site at https:/ /rachelandrew.co.uk
& why is it different to flexbox? ▸ How do I get started using grid in production? ▸ What about old browsers? ▸ How can we help encourage browsers to give us cool new stuff?
1fr)); } Grid minmax() and auto-fill Creating a flexible number of flexible tracks, with a little bit of grid spec magic. http:/ /codepen.io/rachelandrew/pen/evjdLM
{ flex: 1 1 0; } .example2 > div.bigger { flex: 4 1 0; } Flexbox Some things grow larger than other things. This is defined using flex properties on the item. http:/ /codepen.io/rachelandrew/pen/MpBbwX
margin: 20px; } Grid To make some tracks larger than others, we do that when defining the tracks on the container not on the item itself. http:/ /codepen.io/rachelandrew/pen/JWBbJP
Grid allows you to layer items, or for two items to occupy the same space ‣ Grid allows full control of negative space in your designs ‣ Grid has methods such as the dense packing mode to backfill gaps in a tight-packed grid
to control rows and columns ‣ You are adding widths to a flex item in order to make it line up with rows above. ‣ You want control of the layout from the parent ‣ Items need to occupy the same space or overlap
Feature box display: grid turns on grid layout grid-gap defines gutters between grid items grid-template-columns creates column tracks. In this case creating a grid with 6 equal columns.
-1; grid-row: 1 / 4; } Feature box The image starts at grid column line 1 and ends at -1, which is the end line. It starts at grid row 1, ending at grid row 4. Using box alignment properties to stretch the image over that area.
when you define tracks with grid-template- columns and grid-template-rows ▸ If you place an item outside of that grid, or auto-placed content requires further row or column tracks these are added by grid as the Implicit Grid.
all and (min-width: 53.125em) { .box-title { grid-column: 1 / 6; grid-row: 1 / 3; } } @media all and (min-width: 75em) { .box-title { grid-column: 1 / 4; grid-row: 1 / 2; } } Going responsive Inside media queries we can redefine where items sit on the grid.
(min-width: 28.125em) { .box-newer { grid-column: auto / span 6; } } @media all and (min-width: 53.125em) { .box-newer { grid-column: auto / span 4; } } Going responsive Or redefine how many columns they span.
container, child items: ‣ Using float, lose their float behaviour ‣ 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; grid-template-columns: repeat(12,1fr); grid-gap: 20px; } .listing > * { flex: 1 1 30%; margin: 0 20px 20px 20px; } Adding a flex fallback Browsers that support display: flex and not grid will turn the children into flex, not grid, items. The flex properties applied to those items will be ignored by grid layout.
20px 20px 20px; } @supports(display: grid) { .listing > * { margin: 0; } } Using feature queries Add a margin for flex layout, remove it if we are using grid layout.
grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } Float and Clear The float and clear properties have no effect on a grid item. https:/ /codepen.io/rachelandrew/pen/YZeqZv
{ border-spacing: 10px; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } display: table Anonymous boxes will not be generated and the item will become a grid item. https:/ /codepen.io/rachelandrew/pen/bqLpQN
{ display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } The vertical-align property Can be used as a fallback for box alignment and ceases to apply on grid items. https:/ /codepen.io/rachelandrew/pen/vxdGaQ
▸ Prefixed with -ms ▸ No auto-placement or grid-template-areas layout ▸ For simple line-based positioning it works ▸ More at https:/ /rachelandrew.co.uk/archives/2017/04/04/edge-starts-work- on-their-grid-implementation-update/
issues against CSS specifications ▸ Raise bugs against browsers ▸ Vote on features where browsers have a platform to do so ▸ Write about new features - it demonstrates we want them ▸ Be nice while doing it. Browser engineers and spec editors work within constraints just as you do in your projects.
by Example for worked examples, and a free video tutorial: http:/ /gridbyexample.com I created a huge set of guides for MDN: https:/ /developer.mozilla.org/en-US/docs/Web/CSS/ CSS_Grid_Layout Over 4 years of grid thoughts on my site at: https:/ /rachelandrew.co.uk/archives/tag/cssgrid