CSS.la Study Group #6: Using CSS Grid Today!
A presentation at CSS.la Study Group #6: Using CSS Grid Today! in in Los Angeles, CA, USA by Scott Gruber
Using CSS Grid Today Scott Gruber Los Angeles, November 2018
History of Web Layouts • • • • Table Floats Flexbox CSS Grid
CSS Grid Layout shipped in production browsers 2017.
CSS Grid Layout brings a twodimensional grid system to the Web.
Overview • • • • • • • Grid terminology Grid display Creating the grid template Naming grid areas Placing grid items Implicit grid behavior Grid spacing and alignment
“A grid is an intersecting set of horizontal and vertical lines”
Grid display: grid;
Grid Rows grid-template-rows grid-row
Grid Columns grid-template-columns grid-column
Grid Gap grid-gap
Grid Area grid-template-areas grid-area
Grid Terminology
Creating a Grid Container To make an element a grid container, set its display property to grid. All of its children automatically become grid items. The markup
<div id="layout"> <div id="one">One</div> <div id="two">Two</div> <div id="three">Three</div> <div id="four">Four</div> <div id="five">Five</div> </div> The styles #layout { display: grid; }
Defining Row and Column Tracks grid-template-rows grid-template-columns • The value of grid-tempate-rows is a list of the heights of each row track in the grid. • The value of grid-template-columns is a list of the widths of each column track in the grid. #layout { display: grid; grid-template-rows: 100px 400px 100px; grid-template-columns: 200px 500px 200px; } • The number of sizes provided determines the number of rows/ columns in the grid. This grid in the example above has 3 rows and 3 columns.
Track Size Values The CSS Grid spec provides a lot of ways to specify the width and height of a track. Some of these ways allow tracks to adapt to available space and/or to the content they contain: • Lengths (such as px or em) • Percentage values (%) • Fractional units (fr) • minmax() • min-content, max-content • auto • fit-content()
Giving Names to Grid Areas grid-template-areas • grid-template-areas lets you assign names to areas in the grid to make it easier to place items in that area later. • The value is a list of names for every cell in the grid, listed by row. • When neighboring cells share a name, they form a grid area with that name.
Fractional Units (fr) The Grid-specific fractional unit (fr) expands and contracts based on available space: #layout { display: grid; grid-template-rows: 100px 400px 100px; grid-template-columns: 200px 1fr 200px; }
Giving Names to Grid Areas (cont’d) #layout { display: grid; grid-template-rows: [header-start] 100px [content-start] 400px [footerstart] 100px; grid-template-columns: [ads] 200px [main] 1fr [links] 200px; grid-template-areas: "header header header" "ads main links" "footer footer footer" }
Simple Page
HTML <div class="grid"> <header>Header</header> <nav> <ul> <li><a href="">Home</a></li> </ul> </nav> <article> <h1>Article</h1> <p>Content for my article would go here.</p> </article> <aside>Aside</aside> <section>Section</section> <footer>Footer</footer> </div>
Simple Page
Placing items on a Grid .grid { display: grid; grid-gap: 10px; grid-template-areas: "header" "nav" "article" "aside" "section" "footer"; } header { grid-area: header; } nav { grid-area: nav; } article { grid-area: article; } aside { grid-area: aside; } footer { grid-area: footer; }
Repeating Track Sizes The shortcut repeat() function lets you repeat patterns in track sizes: repeat(#, track pattern) The first number is the number of repetitions. The track sizes after the comma provide the pattern: BEFORE: grid-template-columns: 200px 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 200px; AFTER: grid-template-columns: 200px repeat(5, 20px 1fr) 200px; (Here repeat() is used in a longer sequence of track sizes. It repeats the track sizes 20px 1fr 5 times.)
Feature Queries The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query.
Feature Queries @supports (display: grid) { display: grid; grid-gap: 1em; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
Bootstrap 12 column grid
Bootstrap 12 column grid
"Grid lets us move away from bootstrap 12 column grids"
“Grids can help you create magazine layouts on the web”
“Don’t just choose a grid. Design it!” –Nathan Ford founder of Gridset
“The Fonmon”
“The Gertsner”
“The Gertsner”
“The Carson”
Andy Clarke, Head of Creative at Stuff and Nonsense. Design consultant and mentor. Author of “Art Direction for the Web” @malarkey https://stuffandnonsense.co.uk
“Art direction and design helps your audience feel something”
Cool CSS to explore in 2019 • Layout - CSS Grid and Flexbox • Multi-column layout • Floats as originally designed. • CSS Shapes, Transforms and Animations • Feature queries
Rachel Andrew @rachelandrew https://rachelandrew.co.uk Photo by Drew McLellan
Jen Simmons Designer Advocate at Mozilla. @jensimmons https://www.layout.land
“If I can leave you with any advice, it is to make room for time to play with new things.”
Thank you. https://speaking.scottgruber.me @scott_gruber
At long last after 25 years we finally have a CSS Layout system that lets us use a grid to achieve true page layout. The latest stat on caniuse.com shows global usage of CSS Grid is 87.25%.
In this workshop we’ll cover CSS Grid properties, feature queries and fall backs to support older browsers. We’ll demo how to use Firefox Dev Tools to help visualize a grid and play with several code pens using CSS Grid to code familiar layouts and to format a portion of page such as gallery of images or people.
for free. You
can too.
Resources
The following resources were mentioned during the presentation or are useful additional information.
