CSS Grid Layout Joan Boone jpboone@email.unc.edu Slide 1 Topics - - PowerPoint PPT Presentation

▶
css grid layout
SMART_READER_LITE
LIVE PREVIEW

CSS Grid Layout Joan Boone jpboone@email.unc.edu Slide 1 Topics - - PowerPoint PPT Presentation

Apr 05, 2024 146 likes •404 views

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

slide-1
SLIDE 1

Slide 1

CSS Grid Layout

Joan Boone

jpboone@email.unc.edu

INLS 572

Web Development

slide-2
SLIDE 2

Slide 2

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-3
SLIDE 3

Slide 3

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-4
SLIDE 4

Slide 4

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-5
SLIDE 5

Slide 5

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-6
SLIDE 6

Slide 6

Basic Grid Layout

<body> <div class="wrapper"> <header>Header</header> <aside><h2>Sidebar</h2></aside> <article> <h1>2 column, header and footer</h1> <p> Lorem ipsum dolor....</p> </article> <footer>Footer</footer> </div> </body>

Grid Container

2col-header-footer.html

Grid Items

(direct descendants of Grid Container)

slide-7
SLIDE 7

Slide 7

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-8
SLIDE 8

Slide 8

Basic Grid Layout

<body> <div class="wrapper"> <header>Header</header> <aside><h2>Sidebar</h2></aside> <article> <h1>2 column, header and footer</h1> <p> Lorem ipsum dolor....</p> </article> <footer>Footer</footer> </div> </body>

header { grid-area: head; } footer { grid-area: foot; } article { grid-area: main; } aside { grid-area: side; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-areas: "head 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"; margin: 0; } .wrapper > * { padding: 1em; color: white; font-size: 150%; margin: 0; } grid-area: head grid-area: foot grid-area: side grid-area: main

Each grid item is associated with a grid-area Define the grid container with 9 columns, each with a size of 1fr, a “fraction” unit. Defines how to layout the grid-areas All (*) elements that are direct descendants of an element with the wrapper class have these style rules applied to them

CSS HTML

slide-9
SLIDE 9

Slide 9

Many variations

  • n this pattern

with 2 columns, a header, and a footer

slide-10
SLIDE 10

Slide 10

Variation: no Sidebar

What HTML and CSS changes are needed?

slide-11
SLIDE 11

Slide 11

Variation: no Sidebar

<body> <div class="wrapper"> <header>Header</header> <aside><h2>Sidebar</h2></aside> <article> <h1>2 column, header and footer</h1> <p> Lorem ipsum dolor....</p> </article> <footer>Footer</footer> </div> </body>

header { grid-area: head; } footer { grid-area: foot; } article { grid-area: main; } aside { grid-area: side; } .wrapper { margin: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-areas: "head head head head head head head head head" "main main main main main main main main main" "foot foot foot foot foot foot foot foot foot"; } .wrapper > * { margin: 0; padding: 1em; color: white; font-size: 150%; }

HTML CSS

slide-12
SLIDE 12

Slide 12

Variation: no Header

grid-template-areas: "side side side main main main main main main" "foot foot foot foot foot foot foot foot foot";

nc-national-parks-grid.html

<aside> <article> <footer> <div class="wrapper">

aside {grid-area: side;} article {grid-area: main;} footer {grid-area: foot;}

slide-13
SLIDE 13

Slide 13

<body> <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" /> <p>And more useful info ...</p> </section> <footer>Footer</footer> </div> </body>

3col-images.html

Grid Layout: 3 columns with images

header { grid-area: head; } footer { grid-area: foot; } .left { grid-area: left; } .middle { grid-area: middle; } .right { grid-area: right; } .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"; }

HTML CSS

slide-14
SLIDE 14

Slide 14

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-15
SLIDE 15

Slide 15

Null Cell Tokens

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.

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"; Source: W3C Specification for grid-template-areas property

slide-16
SLIDE 16

Slide 16

Grid + Null Cell Tokens to Mask Images

grid-template-areas: ".... .... .... .... main main main main ....";

null-cell-tokens-image-masking.html

slide-17
SLIDE 17

Slide 17

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-18
SLIDE 18

Slide 18

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-19
SLIDE 19

Slide 19

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-20
SLIDE 20

Slide 20

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-21
SLIDE 21

Slide 21

Sizing Grid Columns

with grid-template-columns

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?

grid-template-columns: repeat(9, 1fr); grid-template-areas: "head 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"; grid-template-columns: repeat(3, 1fr); grid-template-areas: "head head head" "side main main" "foot foot foot";

slide-22
SLIDE 22

Slide 22

Sizing Grid Columns without fr units

  • 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-template-columns: 300px auto; grid-template-areas: "head head" "side main" "foot foot";

grid-cols-px-auto.html

slide-23
SLIDE 23

Slide 23

Sizing Grid Rows

  • Most CSS layout rules will adjust the row height automatically to

accommodate the content when no specific height has been specified.

  • Use the grid-template-rows property to specify the height of each

row – a value must be specified for each row in the grid.

  • The default values are grid-template-rows: auto auto auto;
slide-24
SLIDE 24

Slide 24

Sizing Grid Rows

with grid-template-rows

grid-template-rows: 300px auto 80px;

grid-rows-px-auto-px.html

Increase the header height to 300px Example: w3schools grid-template-rows