Using CSS Grid on academic sites at the UCLA IoES

A presentation at Using CSS Grid on UCLA Academic Websites in October 2018 in Los Angeles, CA, USA by Scott Gruber

Slide 1

Slide 1

CSS Grid Using CSS Grid today on academic websites at the UCLA IoES Scott Gruber Los Angeles, October 2018

Slide 2

Slide 2

CSS Grid Layout shipped in production browsers 2017.

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

CSS Grid Layout brings a twodimensional grid system to the Web.

Slide 6

Slide 6

“A grid is an intersecting set of horizontal and vertical lines”

Slide 7

Slide 7

Overview • • • • • • • Grid terminology Grid display type Creating the grid template Naming grid areas Placing grid items Implicit grid behavior Grid spacing and alignment

Slide 8

Slide 8

Grid display: grid;

Slide 9

Slide 9

Grid Rows grid-template-rows grid-row

Slide 10

Slide 10

Grid Columns grid-template-columns grid-column

Slide 11

Slide 11

Grid Gap grid-gap

Slide 12

Slide 12

Grid Area grid-template-areas grid-area

Slide 13

Slide 13

Grid Terminology

Slide 14

Slide 14

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; }

Slide 15

Slide 15

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.

Slide 16

Slide 16

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()

Slide 17

Slide 17

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; }

Slide 18

Slide 18

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.)

Slide 19

Slide 19

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.

Slide 20

Slide 20

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" }

Slide 21

Slide 21

Placing Items on the Grid (cont’d) By line number: #one { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 4; } Using a span: #one { ... grid-column-start: 1; grid-column-end: span 3; } Starting from the last grid line and spanning backward: #one { ... grid-column-start: span 3; grid-column-end: -1; } By line name: #one { grid-row-start: header-start; grid-row-end: header-end; … }

Slide 22

Slide 22

Feature Queries @supports (display: grid) { display: grid; grid-gap: 1em; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

Slide 23

Slide 23

Bootstrap 12 column grid

Slide 24

Slide 24

Bootstrap 12 column grid

Slide 25

Slide 25

"Grid lets us move away from bootstrap 12 column grids"

Slide 26

Slide 26

“Grids can help you create magazine layouts on the web”

Slide 27

Slide 27

“Don’t just choose a grid. Design it!” –Nathan Ford founder of Gridset

Slide 28

Slide 28

“The Fonmon”

Slide 29

Slide 29

“The Gertsner”

Slide 30

Slide 30

“The Gertsner”

Slide 31

Slide 31

“The Carson”

Slide 32

Slide 32

Andy Clarke, Head of Creative at Stuff and Nonsense. Design consultant and mentor. Author of “Art Direction for the Web”

Slide 33

Slide 33

“Art direction and design helps your audience feel something”

Slide 34

Slide 34

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

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Rachel Andrew Rachel Andrew is a British web developer, author and speaker known for her expertise in HTML, CSS, JavaScript and PHP. Photo by Drew McLellan

Slide 40

Slide 40

“If I can leave you with any advice, it is to make room for time to play with new things.” –Rachel Andrew

Slide 41

Slide 41

Thank you. https://speaking.scottgruber.me