INLS 572 Web Development CSS Grid Layout Joan Boone jpboone@email.unc.edu Slide 1
Topics Part 1: Grid Layout Overview Part 2: Grid Examples using Template Areas Part 3: Null Cells and Broken Grids Part 4: Sizing Grid Columns and Rows Slide 2
Grid Layout Resources Specification: CSS Grid Layout Module, Browser support Rachel Andrew Get Started with Grid Layout Grid by Example Articles, Tutorials, Examples CSS Tricks: A Complete Guide to Grid w3schools: CSS Grid Layout MDN: CSS Grid Layout Codrops: CSS Grid Slide 3
Grid Layout: Model and Terminology CSS Grid is a two-dimensional layout system that can handle both rows and columns. You apply CSS rules to a parent element (Grid Container) and its child elements (Grid Items). Grid Container is the element on which display:grid is applied • • Grid Items are the children, or direct descendants, of the Grid Container Source: Codrops: CSS Grid Slide 4
Grid Layout: Placing Items in the Grid Two approaches • With line-based placement lines are numbered for rows and columns and are indexed from 1. Items are positioned by specifying the starting/ending column line number, and the starting/ending row line number • With grid template areas sections of the grid are assigned names, and items are mapped to these grid areas by their names. Slide 5
Basic Grid Layout <body> Grid Container <div class="wrapper"> <header>Header</header> <aside><h2>Sidebar</h2></aside> <article> Grid Items <h1>2 column, header and footer</h1> (direct descendants of <p> Lorem ipsum dolor....</p> Grid Container) </article> <footer>Footer</footer> </div> </body> 2col-header-footer.html Slide 6
Topics Part 1: Grid Layout Overview Part 2: Grid Examples using Template Areas Part 3: Null Cells and Broken Grids Part 4: Sizing Grid Columns and Rows Slide 7
Basic Grid Layout grid-area: head <body> HTML grid-area: main <div class="wrapper"> <header>Header</header> <aside><h2>Sidebar</h2></aside> <article> grid-area: side <h1>2 column, header and footer</h1> <p> Lorem ipsum dolor....</p> </article> <footer>Footer</footer> </div> </body> grid-area: foot CSS header { grid-area: head; } Each grid item is associated with footer { grid-area: foot; } article { grid-area: main; } a grid-area aside { grid-area: side; } .wrapper { Define the grid container with 9 columns, display: grid; each with a size of 1fr , a “fraction” unit. grid-template-columns: repeat(9, 1fr); grid-template-areas: "head head head head head head head head head" Defines how to layout the grid-area s "side side side main main main main main main" "foot foot foot foot foot foot foot foot foot"; margin: 0; } All (*) elements that are direct .wrapper > * { padding: 1em; descendants of an element with the color: white; wrapper class have these style rules font-size: 150%; applied to them margin: 0; } Slide 8
Many variations on this pattern with 2 columns, a header, and a footer Slide 9
Variation: no Sidebar What HTML and CSS changes are needed? Slide 10
Variation: no Sidebar CSS header { grid-area: head; } footer { grid-area: foot; } article { grid-area: main; } aside { grid-area: side; } HTML .wrapper { <body> margin: 0; <div class="wrapper"> display: grid; <header>Header</header> grid-template-columns: repeat(9, 1fr); <aside><h2>Sidebar</h2></aside> grid-template-areas: <article> "head head head head head head head head head" <h1>2 column, header and footer</h1> "main main main main main main main main main" <p> Lorem ipsum dolor....</p> "foot foot foot foot foot foot foot foot foot"; } </article> <footer>Footer</footer> </div> .wrapper > * { </body> margin: 0; padding: 1em; color: white; font-size: 150%; } Slide 11
Variation: no Header <div class="wrapper"> <aside> <article> <footer> grid-template-areas: aside {grid-area: side;} "side side side main main main main main main" article {grid-area: main;} "foot foot foot foot foot foot foot foot foot"; footer {grid-area: foot;} nc-national-parks-grid.html Slide 12
Grid Layout: 3 columns with images <body> HTML <div class="wrapper"> <header>Header</header> <section class="left"> <img src=".../strawberries.jpg" /> <p>Useful info about ...</p> </section> <section class="middle"> <img src=".../strawberries.jpg" /> <p>More useful info about ...</p> </section> <section class="right"> <img src=".../strawberries.jpg" /> header { grid-area: head; } CSS <p>And more useful info ...</p> footer { grid-area: foot; } </section> .left { grid-area: left; } .middle { grid-area: middle; } <footer>Footer</footer> </div> .right { grid-area: right; } </body> .wrapper { margin: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-areas: "head head head head head head head head head" "left left left middle middle middle right right right" "foot foot foot foot foot foot foot foot foot"; 3col-images.html } Slide 13
Topics Part 1: Grid Layout Overview Part 2: Grid Examples using Template Areas Part 3: Null Cells and Broken Grids Part 4: Sizing Grid Columns and Rows Slide 14
Null Cell Tokens grid-template-areas: ".... .... .... head head head head head head" "side side side main main main main main main" "foot foot foot foot foot foot foot foot foot"; A sequence of one or more '.' is a valid grid cell token name and represents a null cell token where nothing is displayed in the corresponding grid cells. Source: W3C Specification for grid-template-areas property Slide 15
Grid + Null Cell Tokens to Mask Images grid-template-areas: ".... .... .... .... main main main main ...."; null-cell-tokens-image-masking.html Slide 16
When your grid breaks... This means that the definition of the grid-template-areas is invalid, and the browser is unable to render the grid correctly. There are many ways that a definition could be invalid. Here are a few important rules to remember: • Each string must specify the same number of columns • Each cell token must have a valid name, e.g., alphanumeric string • Each grid area must be rectangular and connected Slide 17
When your grid breaks... Problem: Different number of columns grid-template-areas: "head head head head head head head head" "side side side main main main main main main" "foot foot foot foot foot foot foot foot foot"; Problem: Grid cell token has invalid name grid-template-areas: "head head head head head head head head head" "$$$$ side side main main main main main main" "foot foot foot foot foot foot foot foot foot"; Problem: Grid area is not rectangular and connected grid-template-areas: "head head head head head head head head head" "side side side main main main main head head" "foot foot foot foot foot foot foot side side"; Slide 18
How to Inspect the Grid Layout In the DevTools Inspector, select the element that is the grid container, i.e., the one that has the display:grid style rule Slide 19
Topics Part 1: Grid Layout Overview Part 2: Grid Examples using Template Areas Part 3: Null Cells and Broken Grids Part 4: Sizing Grid Columns and Rows Slide 20
Sizing Grid Columns with grid-template-columns grid-template-columns: repeat( 9 , 1fr); grid-template-columns: repeat( 3 , 1fr); grid-template-areas: grid-template-areas: "head head head head head head head head head" "head head head" "side side side main main main main main main" "side main main" "foot foot foot foot foot foot foot foot foot"; "foot foot foot"; In both of these examples, the sidebar occupies one-third of the window width, and the main article occupies the remaining two-thirds. One advantage of using a larger number of fractional units is that you can make finer adjustments for the sidebar width. The fractional widths allow the same proportions (1/3, 2/3) to be applied regardless of the actual width of the browser window – you can see this behavior by re-sizing the window. Suppose you wanted the sidebar and main article to have the same proportions (½ , ½ ). What changes are needed to make this layout adjustment? Slide 21
Sizing Grid Columns without fr units grid-template-columns: 300px auto; grid-template-areas: "head head" "side main" "foot foot"; This grid is 3 x 2 • • Sidebar remains fixed at 300px width • Main article adjusts automatically to fill in the remainder of the space in the browser window grid-cols-px-auto.html Slide 22
Recommend
More recommend
