client-side web development - github pages · css grid is a powerful layout system which allows for...
TRANSCRIPT
![Page 1: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/1.jpg)
Client-Side Web DevelopmentClass 3.1
![Page 2: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/2.jpg)
Today’s Topics
• CSS Grid
• Exercise: Grid Garden
![Page 3: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/3.jpg)
Announcements
![Page 4: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/4.jpg)
In-Class Labs
![Page 5: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/5.jpg)
Any Questions?
![Page 6: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/6.jpg)
CSS Grid
![Page 7: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/7.jpg)
CSS Grid is a powerful layout system which allows for the control and placement of items
into columns and rows
![Page 8: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/8.jpg)
When working with CSS Grid, CSS rules will be applied to both the parent (Grid Container)
and the DIRECT children (Grid Items)
![Page 9: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/9.jpg)
CSS Grid Terminology
![Page 10: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/10.jpg)
CSS Grid Terminology
• Grid Container: The element that display: grid is applied
• Grid Item: The direct child of a grid container
• Grid Line: The dividing lines that make up the grid structure, which run both vertically (columns) and horizontally (rows)
• Grid Track: The space between two grid lines (aka a single column or a single row)
• Grid Cell: A single unit of the grid
• Explicit Grid: The grid column and rows defined in CSS Rules.
• Implicit Grid: The grid column and rows auto-generated by the browser, but not defined
![Page 11: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/11.jpg)
A CSS Grid
![Page 12: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/12.jpg)
Grid RowsGrid Lines
![Page 13: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/13.jpg)
Grid Columns
Grid Lines
![Page 14: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/14.jpg)
1 2 3 41
2
3
![Page 15: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/15.jpg)
CSS Grid Terminology
• Grid Container: The element that display: grid is applied
• Grid Item: The direct child of a grid container
• Grid Line: The dividing lines that make up the grid structure, which run both vertically (columns) and horizontally (rows)
• Grid Track: The space between two grid lines (aka a single column or a single row)
• Grid Cell: A single unit of the grid
• Explicit Grid: The grid column and rows defined in CSS Rules.
• Implicit Grid: The grid column and rows auto-generated by the browser, but not defined
![Page 16: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/16.jpg)
Defining a Grid
![Page 17: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/17.jpg)
Use the display: grid to create a Grid container
![Page 18: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/18.jpg)
Use the grid-template-columns and grid-template-rows to create an explicit grid
![Page 19: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/19.jpg)
These properties take a list of sizes, with each item in the list becoming an explicit row or
column
![Page 20: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/20.jpg)
The repeat() function can be used to create multiple columns or rows of the same size. The first value of function is the number of times to
repeat, the second the size.
![Page 21: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/21.jpg)
The grid-gap property can be used to add space between grid cells
![Page 22: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/22.jpg)
Examples
![Page 23: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/23.jpg)
Grid Item Placements
![Page 24: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/24.jpg)
Use the grid-column-start or grid-row-start properties to specifies on
which grid line a grid item should start
![Page 25: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/25.jpg)
Use the grid-column-end or grid-row-end properties to specifies on which
grid line a grid item should end
![Page 26: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/26.jpg)
If only a start or an end is provided the grid item will span 1 grid column or row
![Page 27: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/27.jpg)
The shortcuts grid-column and grid-row will take both the start and end separate by a /
![Page 28: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/28.jpg)
The span keyword followed by an integer can be used instead of a grid line number to
indicate how many rows or columns to span
![Page 29: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/29.jpg)
Examples
![Page 30: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/30.jpg)
Using Grid Areas
![Page 31: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/31.jpg)
The grid-template-areas property is used to specify areas of a grid using a grid area name
![Page 32: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/32.jpg)
The . can be used to represent a part of the grid where there is no grid areas
![Page 33: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/33.jpg)
Use the grid-area property on a grid item to place that item in the grid area
![Page 34: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/34.jpg)
Examples
![Page 35: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/35.jpg)
Auto Fit and Fill
![Page 36: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/36.jpg)
The auto-fill() function fills the row with as many columns as it can fit, creating implicit
columns whenever a new column can fit
![Page 37: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/37.jpg)
The auto-fit() function fits the currently available columns into the space by expanding
them to take up the available space
![Page 38: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/38.jpg)
The minmax() function define a range of sizes of a column or row
![Page 39: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/39.jpg)
Examples
![Page 40: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/40.jpg)
Alignment
![Page 41: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/41.jpg)
Use justify-items and align-items properties to align the content horizontally and
vertically, respectively, inside each grid cell
![Page 42: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/42.jpg)
Use justify-content and align-content to align the grid cells horizontally and vertically,
respectively, inside the grid
![Page 43: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/43.jpg)
Use justify-self and align-self on a grid item to align the content horizontally and
vertically, respectively, inside each grid cell
![Page 44: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/44.jpg)
Nested Grids
![Page 45: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/45.jpg)
Exercise: Grid Garden
![Page 46: Client-Side Web Development - GitHub Pages · CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows. When working with CSS](https://reader033.vdocument.in/reader033/viewer/2022042220/5ec5edf9e9422601c50f7fd9/html5/thumbnails/46.jpg)
For next class...
• Review: Keeping Things Accessible
• Lab: Stay on the Grid