![Page 1: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/1.jpg)
CSS grid layoutNetwork Media / Class 5
![Page 5: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/5.jpg)
CSS grid layout terminologyNetwork Media / Class 5
![Page 6: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/6.jpg)
<div class="container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </div>
.container { display: grid; }
The grid container is the enclosing element containing all items in the grid & has display: grid; applied in its CSS.
![Page 7: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/7.jpg)
<div class="container"> <div class="item item-1”> <p>This paragraph isn’t a grid item, but is nested in one. </p> </div> <div class="item item-2"></div> <div class="item item-3"></div> </div>
The grid items are nested one level below the grid container. They can be styled with grid layout CSS to set their position.
![Page 8: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/8.jpg)
A grid line helps to define the dividing structure of the grid.
![Page 9: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/9.jpg)
A grid track sits between two adjacent grid lines; it can be a row or column.
![Page 10: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/10.jpg)
A grid cell sits between a pair of adjacent grid lines for columns and another adjacent pair of grid lines for rows.
![Page 11: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/11.jpg)
A grid area is the total space surrounded by four grid lines.
![Page 12: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/12.jpg)
Defining the gridSetting up the container
![Page 13: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/13.jpg)
.wrapper { display: grid; grid-template-columns: 400px 400px 400px; grid-template-rows: 200px; }
A three-column grid with 400x200 pixel grid cells.
![Page 14: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/14.jpg)
.wrapper { display: grid; grid-template-columns: 400px 400px 400px; grid-template-rows: 200px; grid-gap: 20px; }
grid-gap defines the amount of space between rows and columns.
![Page 15: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/15.jpg)
.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px; grid-gap: 20px; }
Grid sizes can be specified as fractions, defining the proportion of space taken up by a track.
![Page 16: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/16.jpg)
.wrapper { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 200px; grid-gap: 20px; }
In this case, a 2-column grid where one column is 1/3 the available width and the other is 2/3 the available width.
![Page 17: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/17.jpg)
.wrapper { display: grid; grid-template-columns: 1fr 50px 1fr 1fr; grid-template-rows: 200px; grid-gap: 20px; }
Absolute and fraction values can be mixed. The space for fixed size tracks is allocated first; remaining space is split.
![Page 18: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/18.jpg)
Formatting the grid itemsSetting their size and location
![Page 19: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/19.jpg)
.grid-item { grid-column-start: 2; grid-column-end: 4; }
grid-column-start, grid-column-end, grid-row-start, and grid-row-end can be used to place the element in a specific cell.
![Page 20: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/20.jpg)
.grid-item { grid-column: 2 / 4; /* same as: * grid-column-start: 2; * grid-column-end: 4; */ }
grid-column and grid-row can be used as shorthand, separating the start and end with a slash /
![Page 21: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/21.jpg)
.grid-item { grid-column: 2 / span 2; /* same as: * grid-column-start: 2; * grid-column-end: 4; */ }
grid-column-end and grid-row-end can be calculated relative to the item’s start, with the span value.
![Page 22: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/22.jpg)
.grid-item { width: 100px; height: 100px; align-self: center; justify-self: center; }
By default, grid items will expand to fill the available area unless they have a fixed size. Use align-self to control top/bottom alignment and justify-self to control lef/right.
![Page 23: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/23.jpg)
Resources
• https://gridbyexample.com/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• https://css-tricks.com/snippets/css/complete-guide-grid/
![Page 24: CSS grid layout - classes.dma.ucla.educlasses.dma.ucla.edu/.../161/assets/05_DMA-161-S2018_CSSGridLay… · The grid items are nested one level below the grid container. They can](https://reader035.vdocuments.site/reader035/viewer/2022071117/600262e6f85d6c2c2f0cf0d2/html5/thumbnails/24.jpg)
See code examples.