## CSS Grid Lines Terminology ### Grid Container Element containing a grid, defined by setting: ```css display: grid ``` ### Grid Item Element that is a direct descendant of the grid container ```html <div class="site" style="display: grid"> <!-- Grid items --> <header class="masthead"></header> <h1 class="page-title"></h1> <main class="main-content"></main> <aside class="sidebar"></aside> <footer class="footer"></footer> <!-- End Grid items --> </div> ``` ### Grid Line Horizontal (<mark style="color: #51a7f9; background:transparent">row</mark>) or vertical (<mark style="color: #ec5d57; background: transparent;">column</mark>) line separating the grid into sections. Grid lines are referenced by number, starting and ending with the outer borders of the grid. ![[grid-line.png.png]] Grid lines can also be named for easier reference. ### Grid Cell The intersection between a grid row and a grid column. Effectively the same as a table cell. ![[grid-cell.png]] ### Grid Track The space between two or more adjacent grid **lines**. <mark style="color:#F4AEAB;background: transparent">Row</mark> tracks are horizontal, <mark style="color:#78B0D5;background: transparent">Column</mark> tracks are vertical. ![[grid-track.png]] ### Grid Area Rectangular area between four specified grid lines. Grid areas can cover one or more cells. ![[grid-area.png]] ### Grid Gap Empty space between grid tracks (shown in <mark style="color:#76afd6;background: transparent">blue</mark>). Commonly called *gutters*. ![[grid-gap.png]] ## CSS Grid Lines and Units ### grid-template-columns Draws grid lines. Takes list of length values (`em`, `px`, `%`, `fr`, etc.) denoting the distance between each line. ```css grid-template-columns: 2fr 1fr 1fr; ``` ![[grid-template-columns.jpg]] ### grid-template-rows Draws grid lines. Takes list of length values (`em`, `px`, `%`, `fr`, etc.) denoting the distance between each line. ```css grid-template-rows: auto 1fr 3fr; ``` ![[grid-template-rows.jpg]] ### Fraction (`fr`) unit The `fr` unit represents a fraction of the available space in the grid container. ```css grid-template-rows:1fr 1fr 2fr; ``` ### minmax() function The minmax() function defines a size range greater than or equal to min and less than or equal to max. ```css grid-template-rows:1fr minmax(10em, 20em) 1fr; ``` ### repeat() notation The repeat() notation repeats the provided pattern a specified number of times. ```css grid-template-rows:repeat(2, 1fr) 2fr; ``` ## Placing Items on the Grid ```css grid-column: 2/4; grid-row: 2/3; ``` Applied to grid items. Places the item by declaring start and end lines. ![[grid-place-items.jpg]] ### `span` keyword The span keyword is used to define how many grid tracks an element should span. ```css /* Start at line 2, span 3 columns */ grid-columns: 2/3 span; ``` ### Grid Areas `grid-template-areas` Applied to grid container. Uses a text-based grid map to apply grid area names to individual cells ![[grid-template-areas.jpg]] ### Implicit lines If grid item placement requires additional columns or rows to be created, the browser adds implicit lines to keep the grid structurally sound. ___ **Tags**: #grid #css