Mastering CSS Grid
Tags: css, codenewbie, beginners, programming
Published: 2022-08-04 11:55:00

Only created in 2011, CSS Grid is the new kid on the block who has enabled new layouts, and simplified old ones! 

(Cheeky updated version of this article now includes a few sidebars :))

At its core, CSS Grid is used to divide a page into major regions by defining the relationship between elements in terms of size, position, and layer. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldurj7u5ougx1wk879yb.png)

This one I learned through [Grid Garden](https://cssgridgarden.com/), & later updated this article with content from [Grid Critters](https://gridcritters.com/)...

...

# Part 1 CSS Grid vs Other Options 
## 1.1 CSS Grid vs Flexbox 
**Grid Advantage**
= Can easily position elements in 2 dimensions:
1. Columns 
2. Rows

## 1.2 CSS Grid vs Tables 
**Similarities**
= Allows you to align elements into columns & rows 

**Differences**
= More layouts are possible & easier w/ CSS Grid 

_Example_
= Grid container's child elements could position themselves so they overlap & layer (like CSS positioned elements)

...

# Part 2 Definitions
## 2.1 Grid 
= Always starts w/ a line & ends w/ a line 
→ Always has 1 more line than track 

## 2.2 Tracks 
= General term for either Columns or Rows 
= A vertical/horizontal slice  of the Gird 
→ Can be sized & filled w/ Elements 

...

# Part 3 On the Container
## 3.1 Grid Layout 
### Default 
1. Elements in Grid are equal heighted rows 
2. Grid always has at least 1 row and 1 column
3.`grid-template-rows: 1fr;` && `grid-template-columns: 1fr;`

**Example Application**
```
grid-template-columns: 1fr 1fr 1fr 1fr;
```
= 4 Column _Tracks_, but 5 Column _Lines_
→ _line 1_ 1fr _line 2_ 1fr _line 3_ 1fr _line 4_ 1fr _line 5_ 

### Setup 
To begin using CSS Grid, we must select the `<div>` that is the container for all our elements, and apply the following CSS properties:
```
display: grid;
grid-template-columns: ____;
grid-template-rows: ____;
```

### Column/Row Sizing 
#### Syntax
`grid-template-columns/rows`

#### Purpose
1. Set number of columns/rows
2. Set size of each column/row
= Control how Grid element are sized & positioned

#### Units of Measurement
**Application**
= The following units of measurement for values can be used in combination 

**Example**
`grid-template-columns: 100px 3em 40%;`

**1. `px`**
**2. `em`**
**3. `%`**
_Purpose_
= Relative to height/width of Grid
→ % of Grid Size

_Example Use Case_
```
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
```
= Sets up a grid w/ 5 columns, each 20% of full width, & 5 rows, each 20% of full height

**4. `fr`**
= The Fractional/A Fraction of the Free Space

_Purpose_
= Allocate 1 share of available space
→ Divides up left over space after px, em, % allocated spaces are filled

_Application_
= Tell tracks how much of available space to take up 
→ After any fixed-unit tracks get their dibs

_Example Use Case_: 2 elements set to `1fr` & `3fr`
= Available space is divided into 4 equal shares 
→ 1st element occupies 1/4 & 2nd element occupies 3/4 of leftover space

_Example Application_
`grid-template-columns: 50px 1fr 1fr 1fr 50px;`

**5. `vh`**
= Viewport Height 
→ Can be used with `grid-template-rows` to determine the height of a row

**6. `vw`**
 = Viewport Width
→ Can be used with `grid-template-columns` to determine the width of a column

**`fr` vs `%`**
_Similarities_
= Equal sized tracks: `fr` & `%` look the same

_Differences_
`fr`
= A Fraction of the Free Space
→ Takes `gap`s into account

`%`
= A Percentage of the Grid Size 
→ Does _not_ take `gap`s into account: Does not make space for them
→ Rows/Columns will take of the specified % of space no matter what: Tracks will get pushed outside bounds of the Grid

_Conclusion_
= `fr` > `%` 
→ When using `gap`s 

#### Flexible Values
**Purpose**
= Sets a range of possible Element-Size Values 

**Application**
= Working with changing size of Content within a Cell

**1. `auto`**
= Working with text content
= Equal to size of content placed
→ An empty track with `auto` size = Having size of `0px`

**2. minmax()**
_Purpose_
= Defines track size as a Range
→ Rather than taking a single value for track size 

_Application_
= Takes 2 Values as Arguments:
1. Minimum Size of Track 
2. Maximum Size of Track

= If  `max` is lower than `min`
→ `min` overrides `max`
→ Even if `max` is set to `auto` & Track is empty

= Range is always between a smaller value & a larger one
→ No matter ascending or descending placement 

_Interactions_
= Takes priority over regular `fr` tracks 

_Syntax_
`minmax(*min*,*max*)`

**3. `min/max-content`**
_`min-content`_
= Size of smallest content in track

_`max-content`_
= Size of largest content in track 

**4. `repeat()`**
_Purpose_
= Remove need to specify so many identical widths
→ Shorthand

_Syntax_
`repeat(*num tracks*, *size of tracks*)`

_Example Use Case_
Without `repeat`
= `grid-template-columns: 20% 20% 20% 20% 20%;`

With `repeat`
= `grid-template-columns: repeat(5, 20%);`
→ Creates `5` columns, each with `20%` width

_1st Parameter Keyword Values_
--`auto-fill`--
= Fills Grid w/ as many Tracks of the specified size as possible
→ Dynamic

Example
`grid-template-columns: repeat(auto-fill, 150px)`
= Fill the grid with as many 150px columns as possible 

--`auto-fit`--
Similar to `auto-fill`
= Grid will create as many of given sized tracks as will fit

Difference to `auto-fill`
= `auto-fit`: Any empty tracks get collapsed to 0px
→ If columns are created, but there are no elements inside them, they will exist, but you won't see them

--`auto-fit` & `auto-fill` Similarities--
= Takes gaps into account
→ If you have large gaps: grid will have less room to create new tracks

= Both make tracks 0pc if they don't have any grid items inside them 
→ Regardless of whether or not those grid items contain content themselves

## 3.2 Gaps 
### Purpose 
= `grid-column-gap` takes _away_ from the available space that `justify-content` gets to split between the columns

### Syntax
`grid-row/column-gap`
= Measures size of gaps between the tracks

### Implications
= Starting & Ending Line of the `gap`: Has the same _Line Number_
→ The `gap` is 1 thick line, stretched
→ Line now officially starts _after_ the gap 

### Units of Measurement
#### 1. vw
#### 2. vh
#### 3. %
#### 4. px
#### 5. rem

#### Application
= Most `template-columns/rows`' Units of Measurement can be used
→ Except: `fr`

#### Example Use Case
```
planet {
 display: grid;
 grid-template-rows: 1fr 1fr;
 grid-template-columns: 1fr 1fr;
 grid-row-gap: 200px;
 grid-column-gap: 50px;
}
```

## 3.3 Flow 
### Syntax
`grid-auto-flow`

### Purpose
= Change the flow of the Grid itself 

= Configures 2 things: 
1. **Direction** (`row` or `column`)
2. **Packing** (`sparse` or `dense`)

= Can configure Direction & Packing at once
→ `grid-auto-flow: row dense;`

#### What is _Packing_?
= Whether the Grid goes back to previous empty cells or not 

### Example Use Case
Insert Elements into Grid as **Columns**, instead of Rows 
```
grid-auto-flow: column;
```
= Elements flow into Grid: Filling up Columns _before_ Rows 
→ Starts from left

### Implications
= Now `grid-column` placement gets priority
→ Instead of `grid-row` placement

### Values
#### 1. Default
= `grid-auto-flow: sparse row;`
→ Elements flow into the Grid filling up rows before columns: Starting from top
→ Leaves cells empty if Element size does not fit into it: Moves onto next cell to try and fit it

#### 2. `row`
= Elements fill up Rows _before_ Columns
→ Starting from top

#### 3. `column`
= Elements fill up Columns _before_ Rows 
→ Starting from left

#### 4. `sparse`
= Grid keeps moving forward
→ As it looks for an appropriate cell to place the element 
→ Even if that means leaving empty cells behind 

#### 5. `dense`
= Instructs the Grid to go back & fill empty cells previously skipped 
→ Functionally equivalent to `nowrap` in Flexbox

## 3.4 Content Characteristics
### Wrapping
#### Application
= Text can wrap to multiple lines when they need 
→ When size is larger than max value of minmax

#### `auto` 
= `auto` is the size of the content
→ Including wrapping when needed
→ `auto` is a somewhat flexible value 
→ Text will take up as much space as it can before it hits the `max` limit & starts wrapping

#### Implications
= `max` value of `minmax` is respected
→ If contents are able to wrap

## 3.5 `content` Spacing/Positioning
### Purpose
= Controlling the _whole Grid_
→ Position tracks(columns/rows) themselves

= Columns'/Rows' Positioning & Spacing 
→ When they do not take up the full Width/Height of Grid Cells 

### Syntax 
`justify/align-content`

### Values
#### 1. Default: `stretch`
= Changes the size of any `auto`-sized column
→ Until grid is completely filled

= Stretches out `auto` columns
→ But not fixed width columns

= Takes up all available space
→ && Adds it equally to each of the `auto` columns 
→ Size of column depends on the size of its content

= Splits up the free space evenly 
→ Adds it to the `auto` sized columns 
→ On _top_ of their initial size (size of content)

#### 2. `center`
= Groups all the columns/rows up into center of available space in the Grid 

#### 3. `end`
= Columns/rows flush to the right/bottom

#### 4. `start`
= Columns/rows flush to the left/top

#### 5. `space-between`
= Spaces columns/rows out
→ No space on the outside of the outer 2 columns/rows

#### 6. `space-evenly`
= Space around outside 2 columns/rows
→ Even amounts of space everywhere
→ Amount of space is exactly the same
→ On all sides of every column: Including the outer 2 columns

#### 7. `space-around`
= Space _outside_ the 2 columns 1/2 the size of space _between_ the columns
→ Same amount of space _around_ every column
→ Including the outer ones 
→ Middle columns look like they're getting double the space: only bc their space is adjacent to another column's space

## 3.6 `item`s Spacing/Positioning
### Purpose
= Horizontal/Vertical positioning of Grid elements within their Grid cells 
→ When they do not take up the full space of the Grid Cell

### Syntax
`justify/align-items`

### Values 
#### 1. Default: `stretch`
= w/o specifying `justify-items`
→ Only works for items that don't already specify their size 
→ If elements have a `width`/`height` set, `stretch` is overridden

#### 2. `start`
= To the Left

#### 3. `end`
= To the Right

## 3.7 Interaction between Spacing & `gap`s
### Application
= Adding a column gap
→ Widens the distance between the columns
→ && _spacing_ on _outside_ of columns shrink

### Implications
= `gap`s are calculated _before_ spaces

## 3.8 Implicit Tracks
### Creation
= Tracks created beyond `template` on the Container 
→ Created by adding individual elements to a column/row line number larger than those existing

### Definition
= Collapsed tracks from auto-fit are **not** implicit tracks 

### Purpose
= Grid adaptability to content inside
→ Automatically adding as many tracks as it needs to fit all its elements

= Positioning an element into a column that does not exist 
→ Creates a column even if that column was not defined before in the Grid template

### Implications 
= `gap`s are still included between implicit tracks
→ Implicit tracks are identical to regular tracks 
→ They just don't show up unless needed

### Example Use Case
= Grid only had 4 cells: 2 rows & 2 columns
→ But 6 elements to fit in 

= Thus, it makes a brand new implicit row 
→ Makes room for those 2 extra elements 

### Sizing
#### Purpose
= Controlling size of any implicit columns the Grid adds automatically 

#### Syntax
`grid-auto-columns`

#### Values
**1. Default: `auto`**
`grid-auto-columns/rows: auto;`

= As tall/wide as content of element 
→ Collapses down to 0px if there is no content

_Example Application_
= If there are only 5 Columns, but you try to place an element in Column Line 7
→ There will be 2 Implicit Tracks created:
One to place the element in 
& One before that 

**2. Any `template` Values**

## 3.9 Naming 
### Lines
#### Purpose
= To be used instead of Line _Numbers_
→ Can assign a Name to any Line

#### Step 1: Setup - Add Names to Lines
**Location**
= In Values for `grid-template-columns/row`

**Syntax**
= "Line, Track, Line Pattern"
→ Brackets [] are used to name Lines

**Example**
```
grid-template-columns: [start] 1fr 1fr [center] 1fr 1fr [end];
grid-template-rows: [top] 1fr 1fr [bottom];
```

**Default Line Names**
= Order of line
→ **ie** Code Written...
```
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
```
→ ... Implied Line Names
```
grid-template-columns: [1] 1fr [2] 1fr [3] 1fr [4] 1fr [5];
```

**Rules**
_1. Do not need to name _all_ the Lines_
= Can just name _some_ that will be used

_2. Number of Names per Lines_
= No Limit
→ Different Names: Separated by a _space_
```
grid-template-columns: 1fr [middle center] 1fr;
grid-template-rows: 1fr [neat-line awesome-line] 1fr;
```

**Shortcut**
_Purpose_
= Assign the _same_ name to many lines 
→ ie To Position those lines at the same time

_Application_
= Used w/ `repeat()`
→ Only affects Lines created w/in `repeat()`

_Syntax_
```
repeat(*num tracks/lines*, [*lines' name*] *track size*)
```

_Example Use Case_
```
grid-template-columns: 1fr repeat(5, [grass] 50px) 1fr;
```

#### Step 2: Applications of Line Names
**1. Capture Line _after_ Tracks created by `repeat()`**
= Add Line Name again after `repeat()`

**2. Target Multiple Lines w/ Same Name**
_Syntax_
= Use the _Name Number Syntax_
→ Use Name w/ Order Position w/in all those of the same name

_Example Value_: `grass 3`

**3. Grouping Line Names**
_Purpose_
= Creating a Line Group 

_Example Use Case_
Naming line 3 `bottom-start` & line 5 `bottom-end`
= Giving both `bottom` prefix 
→ Grouped the 2 lines 

_Application_
= Lines that are grouped can be referenced through their group name insolation, without the suffixes
**ie** `grid-row: bottom;`

**5. Use Names as Values**
_Location_
= In Values for `grid-column/row-start/end` / `grid-column/row`

_Example_
```
grid-row: top / bottom;
grid-column: start / center;
```

**6. Line Name & Number Values Combined**
= Isolated Line Name && Number Values as part of `grid-column/row` Shorthand Values

_Example_
```
grid-row: 2 / bottom;
```

### Areas
#### Syntax
 `grid-template-areas: ". . ." ". . ." ". . ."`

= Number of ""s = Number of Columns
→ Each pair of quotes separated by a space

= Number of space-separated values inside each "" = Number of Rows
→ Num of space-separated values inside each “” need to be the same

**Example**
```
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}
```
= Each line in `grid-template-areas` setting: Represents a row in the Grid 
→ Each row/line must contain the same number of cell names 

#### Recommended Uses
**1. Create Group for 4 side column lines**
= Name `side` using `-start` and `-end` suffixes
_Example_
```
grid-template-columns: 1fr [side-start] 100px 100px 100px [side-end];
grid-template-rows: 1fr [bottom-start] 100px 100px 100px [bottom-end];
```
```
grid-area: bottom / side;
```
= Is identical to:
```
grid-row-start: bottom;
grid-column-start: side;
grid-row-end: bottom;
grid-column-end: side;
```

**2. Give `column` line group same name as `row` line group**
= All 4 lines working together to form a single `area`
→ Ideal b/c can position items by area name
_Example_
```
grid-area: center;
```

#### Purpose
= Gives Names to Grid Areas
→ Establishes Cells in the Grid & Assigns them Names

#### Warning 
= Areas are not associated with any particular grid item 
→ But can be referenced from the grid-placement properties: `grid-row-start` `grid-row-end` `grid-column-start` `grid-column-end` & their shorthands `grid-row` `grid-column` && `grid-area`

#### Example Use Case
```
planet {
  display: grid;
  grid-gap: 50px;
  
  grid-template-areas: "grass grass dunes" "rocky rocky dunes";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

rocky {
  
  grid-area: rocky;

}

grass {
  
  grid-area: grass;
  
}

dunes {
  
  grid-area: dunes;
  
}
```

#### Applications
**1. Only Creating 1 Area**
_Application_
= Do still need to name all the cells in the grid 
→ But to indicate the cells where you do not want to create an area: Use a period (.) in place of a name
```
grid-template-areas: ". . ." ". center ." ". . .";
```
= "." makes for cells with no name 
→ But items can still flow into those cells on their own
→ It does not prevent the filling of a cell
→ It just leaves its name blank

_Disadvantages_
= Periods mess up how `grid-template-areas` can visually represent the Grid 
--> No longer resembles the Grid itself 
= To keep the Grid look of this definition 
--> Can use ore periods

_Example Use Case_
```
grid-template-areas: ". ...... ." ". center ." ". ...... .";
```
= Only _names_ all Grid lines bordering each area
→ Does not _create_ Grid lines
```
  grid-template-areas: "left . . right";
```
= Defines an area named `left`
→ Names all lines bordering that area
→ Column line 1 & Row line 1 named `left-start`
→ Column line 2 & Row line 2 names `left-end` 
= Can position elements using those line names 
→ Even though you did not manually name them

**ie** Make an element start at the line name `left-end`(line 2)
```
grid-column-start: left-end;
```

#### Advantages
**1. Not needing to name all lines manually**
= Also do not need to give every cell a name 
→ Use a period (.) for non-named cells 

**2. Most convenient way to name lines: `grid-template-areas`**
= After naming the lines, you can position elements to those lines using any of the item placement settings or their shorthands

_Example_
```
grid-area: center;
```
= A shorthand for:
```
grid-area: center-start / center-end / center-start / center-end;
```

#### Recommended Use Case
= Better than naming a ton of lines
→ Areas can be as small or large as you want 
→ As long as the cells are adjacent and form a rectangle

**As an Alternative**
= Naming lines through `areas` instead of manually naming lines through  `template-columns/rows`

#### Setup
**1. Start by defining the areas using empty cells**
= Make sure to get the correct number of rows & columns
```
grid-template-areas: ". . ." ". . ." ". . .";
```
= For 3 rows/columns

**2. Name the cells you need to**
= Create 3 area names using `grid-template-areas`
--> The top 3 cells & the middle left cell will remain empty 

_When naming grid-areas_
= Need to name all of them in order to work
→ Add ""s and .s

#### Types of Values
**1. Default: `none`**

**2. Keyword Values**
_Example_
`none`
= Grid container does not define any names grid areas

**3. String Values**
= 1 Row is created by each separate string listed
→ 1 Column is created for each cell in the string 

**4. Grid Area**
= Multiple cell tokens w/ same name w/in & between rows
→ Creates a single names grid area: Spanning corresponding grid cells 
→ Unless those cells form a rectangle, the declaration is invalid

_Example_

```
grid-template-areas: "a b b" "a c d";
```

**5. Global Values**
= `inherit`, `initial`, `revert`, `revert-layer`, `unset`

...

# Part 4 On Individual Elements 
## 4.1 Sizing 
= % sizing for each element is relative to the grid cell, rather than the whole grid container

## 4.2 Cell Spacing/Positioning
### Values
#### 1. `span`
**Purpose**
= Span a few row/column lines from wherever it is naturally placed 
→ Make Elements take up the space you want: Wherever they are placed in the Grid

**Applications**
_1. Used w/ both `start` & `end`_
Purpose
= Sets element width relative to end (when used w/ `start`) position, or start (when used w/ `end`) position

Example Use Case
```
grid-column-start: 1;
grid-column-end: span 2;
```

_2. Use w/ `start` OR `end` for _both_ `column` & `row`_
Purpose
= Size Element _w/o_ Positioning it
→ Size it regardless of _where_ it lies on the Grid
= Make the UI dynamic

Implications
= Essentially sets the Height (`column` `span` amount) & Width (`row` `span` amount) of the Element
= Starts spanning along Grid flow, from 1st lines, by default

Example Use Case
```
rocky {
grid-column-start*or -end*: span 2;
grid-row-end*or -start*: span 4;
}
```
Or simplified... 
```
rocky {
grid-column: span 2;
grid-row: span 4;
}
```

_3. Used Alone: `start` OR `end` for `column` OR `row`__
Purpose
= Set Element's Starting/Ending Column/Row Line
→ Instead of a fixed Line Number

= No longer need to _hard code_ a specific line
→ Code becomes more _dynamic_

Example Use Cases
```
grid-row-start: span 3;
```
= Element will span 3 lines (counting from 1st line)
```
grid-row-end: span 3;
```
= Element will span 3 lines (counting from 1st line _also_) 

> I found it quite unexpected that `end` and `start` would both count from the same direction

**Values**
= Written after `span` & space
→ Only positive numbers

## 4.3 Item Positioning vs Grid Container
### Grid Container
= Think of Rows and Columns as _Tracks_

### Item Positioning
= Think of Rows and Columns by **Lines**
→ **ie** `grid-row-start: 3` moves an Element down into the 3rd row, but done by making it start at the 3rd **Line**

## 4.4 Column/Row Positioning
### Syntax
`grid-column/row-start/end`

### Purpose
= Tell Element which line to `start`/`end` on
= Position an item by Line Number
→ Choose Line Number on which to place the element

#### `start` and `end` both used
= Extend Element across multiple columns/rows

#### `start` or `end` used alone
= Element spans 1 column or row
= Ends on the line of column or row identified && Takes up a single cell by default
→ Thus, starting on the line directly prior to the one identified

**Example Use Case**
```
grass {
  grid-column-end: 3;
  grid-row-end: 4;
}
```
= 
1. Element starts at 3rd row line & ends at 4th row line 
→ Taking up a single row (track 3)
2. Starts at 2nd column line & ends at 3rd column line
→ Taking up a single column (track 2)
3. The single cell at the intersection of row track 3 & column track 2
→ Is now occupied by the Element

### Application
= Positioning individual elements w/in a Grid container
→ Target each Element by selecting itself 

### Values 
#### Example Value
`grid-column/row-start: 3;`
= Place element starting at the 3rd vertical/horizontal grid line/3rd vertical/horizontal border from left in the grid 

#### Example Use Case
```
grid-row-start: 3;
```
= Start Element at 3rd Horizontal Line 
```
grid-column-start: 3;
```
= Start Element at 3rd Vertical Line

#### Units of Measurement
**1. Positive Numbers**
_Example_
```
grid-column-start: 1;
grid-column-end: 4;
```
= Element starts at 1st vertical grid line & Ends at 4th vertical grid line

**2. Negative Numbers**
= Counts from opposite direction 
_Examples_
```
grid-column-start: -1
```
= Starts at 1st Line from right 
```
grid-row-end: -2
```
= Ends at 2nd line from bottom 

_Purpose_
= `grid-column-end` does not need to be greater than `grid-column-start`
= Count Grid Lines from right instead of left 

#### Example Use Case
```
grid-column-start: 5;
grid-column-end: 2;
```
= Same effect as:
```
grid-column-start: 2;
grid-column-end: 5;
```
= `grid-column-start` & `grid-column-end` can be reversed

## 4.5 Combinations
### 1. `end` Line Position (Num/Name) used with `start` `span`
#### Purpose
= Space in reverse direction 
→ Element spans in _opposite_ direction of Grid flow

> I thought this could be more straight-forwardly done through (the currently redundant) `end` with `span`. This seems like a very convoluted and verbose way of doing it if you just want to start counting from the natural final line. 

#### Application
= Works for both `grid-row` & `grid-column`

**Example**
= If used with `row`
→ Changes to bottom-up
= If used with `column`
→ Changes to right-to-left 

#### Comparison
= Essentially same as **Flexbox**'s `flex-direction: column-reverse` & `flex-direction: row-reverse`

#### Example Use Case
```
rocky {
grid-row-end: 5;
grid-row-start: span 3;
}
```
= Starts counting from the `end` line number identified, and counts the full amount of proceeding lines specified after `span` of `start`

### 2. `grid-column/row-start` or `grid-column/row-end` used _alone_
#### Purpose
= Only Positioning of Element
→ Defining Start & End Positions of Grid Lines

### 3. `grid-column/row-start` & `grid-column/row-end` used _together_

#### Purpose
= Sizing _on top of_ Positioning

### `span` for `start` vs `span` for `end`
#### Similarities
= Exact Same Effect
→ Both count in the _direction_ of Grid flow

#### Differences
= If _both_ are set: `start` takes precedence over `end`
→ `end` will have no effect 

## 4.6 Element Spacing/Positioning 
### Grid Container
#### Syntax
`align/justify-items`

#### Application 
= Used on Grid Container
= If `align/justify-items` is set to anything but `stretch`
→ Elements w/o explicit size specifications: Will Collapse

### Individual Elements
#### Purpose
= Horizontal/vertical positioning
= Used on individual Elements
→ Overrides Grid's `align/justify-items` for the one Element 

#### Syntax
`align/justify-self`

#### Values 
= Same values as `justify/align-items` (which were used on Grid container)

**Defaults**
= Not explicitly placed w/ `grid-area`, `grid-column`, `grid-row`

**1. `start`**
**2. `end`**
**3. `center`**
**4. `stretch`**

#### Application
= If `justify-self` is set to `start` or `end`
→ Must specify `width` if there is no content in the cell

**Example**
```
water {
grid-column: span 2;
}
```
= Equivalent to:
```
water {
justify-self: start;
grid-column: span 2;
width: 100%;
}
```
= Element starts from left of the grid cell, and also spans 100% of the cell
→ B/c `justify-self` is no longer the default `stretch`, this explicit width needs to be set

## 4.7 Order
### Purpose
= Use to alter the positioning an element 
→ 0-based: Has a default of 0 

### Application
= Can be used on any element

#### With Row-Positioned Items
= Row-positioned items are still given 1st placement priority
→ Regardless of the order 

= `grid-row` trumps `order`

### Values
#### Default
= `order: 0`
→ Automatically places all elements according to order in source code

#### Types of Values
**1. Positive or Negative**
= Similar to z-index
→ When specified, overrides the default `order` value of `0`

**2. Any `order` higher than `0`**
= Moves it to get positioned last

**3. Less than `0`**
= Moves it to the front of the line 
→ Gets places first

### Example Use Case
= Overlapping elements
```
.water {
order: 0;
}

#poison {
order: 5;
}
```

## 4.8 Row Positioning
### Purpose
= Does not move the Grid's tacking position forward 
→ Row-positioned items are handled first
→ Grid starts again from the top 
= Positioning an element by `grid area` is row positioning

### Application
= To position elements in rows, use the same properties for columns, replacing the word `column` w/ `row`

### Example Use Case
```
grid-row-start: 3;

grid-row: 3 / 6;
```

## 4.9 Column Positioning
### Columns & Rows Example
```
grid-column: 2;
grid-row: 5;
```
```
grid-column: 2 / span 4;
grid-row: span 5;
```
= Sets position of both dimensions at once

## 4.10 Area Positioning 
### Syntax
`grid-area`
= 4 values separated by a / 

### Purpose
= Combines `grid-row-start`, `grid-column-start`, `grid-row-end`, and `grid-column-end`

= Specifies a grid element's Size & Location: W/in a Grid 
→ By contributing a line, a span, or nothing (automatic) to its grid placement 

= Specifying the edges of its grid area 

### Application
= Grid Elements & absolutely-positioned boxes whose containing block is a grid container

= Used w/ multiple elements: We can overlap them
= Starts at top line, works its way counter-clockwise
→ Top line, left line, bottom line, right line

### Rules 
= Does not require specifying all 4 positioning slots
 
### Values
= `grid-row-start` / `grid-column-start` / `grid-row-end` / `grid-column-end` 

= Any of the values you use in the longhand positioning settings
→ Line Numbers, Line Names, Negative Numbers, span, etc. 

#### 1. Default: `auto`
= All 4 values set to `auto`

#### 2. Keyword Values
**`auto`**
→ Property contributes nothing to grid element's placement 
→ Auto-placement or a default span of `1`

_Use Case_
= Used to skip positioning slots 
→ Won't assign a position 
→ Lets item fill Grid using default behaviour

_Example_
```
grid-area: span 5 / span 2 / auto / auto;
```
= Identical to:
```
grid-area: auto / auto / span 5 / span 2;
```
= Everything left off will be set to `auto`:
```
grid-area: span 5 / span 2;
```

#### 3. <custom-ident> Values 
= String Names
→ ie Names Lines with names `<custom-ident>-start`/`<custom-ident>-end`
= Contributes 1st such line to grid item's placement

Named grid areas auto-generate implicit suffixes for the names of the lines formed 

**Example**
```
grid-area: foo;
```
= Chooses the start/end edge of that named grid area 
&& sets it to `foo-start` and `foo-end`
→ Unless another line named `foo-start` or `foo-end` was explicitly specified beforehand

#### 4. <integer> && <custom-ident> Values 
= Contributes the nth grid line to the grid item's placement 
→ If negative integer: Counts in reverse
= Starting from end edge of explicit grid 

→ If name given as a <custom-ident>
= Only lines w/ that name are counted 

→ If not enough lines w/ that name exists 
= All implicit grid lines are assumed to have that name for the purpose of finding this position

→ Invalid <integer> value: 0 

**Example** 
```
grid-area: 4 some-grid-area / 2 another-grid-area;
```

#### 5. span && [ <integer> || <custom-ident> ] values 
**Examples** 
= Uses a grid span for grid item's placement 
→ Corresponding edge of grid item's grid area is n lines from opposite edge

**Use Cases**
_If name is given as a <custom-ident>_
= Only lines w/ that name are counted

_If not enough lines with that name exist_
= All implicit grid lines on the side of the explicit grid corresponding to search direction: Assumed to have that name for purpose of counting this span

_If <integer> is omitted_
= Defaults to `1`
→ Invalid <integer> values: Negative integers or `0`

```
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;
```

#### 6. Global Values 
= `inherit`, `initial`, `revert`, `revert-layer`. `unset`

### Syntax Options
#### a. Four Values Specified 
= `grid-row-start` set to 1st Value 

Separated with a /

= `grid-column-start` set to 2nd Value 

Separated with a /

= `grid-row-end` set to 3rd Value

Separated with a /

= `grid-column-end` set to 4th Value 

#### b. Three Values Specified 
= `grid-column-end` omitted
→ If `grid-column-start` is set, the `grid-column-end` set to the same
→ If not, `grid-column-end` is set to `auto`

#### c. Two Values Specified 
= `grid-row-end` && `grid-column-end` omitted
→ `grid-row-end` && `grid-column-end` set to `grid-row-start`

#### d. One Value Specified
= `grid-column-start` is omitted
→ `grid-row-start` = `grid-column-start`

**Example Syntax**
```

#item1 {
grid-area: 2 / 2 / auto / span 3;
}
```

### Positioning Elements at Grid Lines
#### Purpose
= More convenient than `grid-row` and `grid-column` positioning shorthands 

#### Application
Identify top line/counter-clockwise pattern 
= Dynamic retrieval of lines in the relevant position
```
grid-area: <top line> / <left line> / <bottom line> / <right line>
```

### Use Case Example
```
planet {
  display: grid;
  grid-template-columns: [left] 190px 190px [right];
  grid-template-rows: [top] 1fr 1fr 1fr 1fr [bottom];
}

dunes {
  grid-area: top / left / bottom / right;
}
```
Functionally equivalent to:
```
grid-row-start: top;
grid-column-start: left;
grid-row-end: bottom;
grid-column-end: right;
```

...

# Part 5 Shorthands 
## 5.1 On Grid Container 
### Grid Template
#### Syntax
`grid-template`

```
grid-template: [top-line] 1fr
               20% [bottom-line]
               / [left-line] 1fr 1fr 1fr 1fr [right-line];
```
= Syntax layout resembles layout of Grid itself

#### Values
= Combines `grid-template-rows` & `grid-template-columns` & `grid-template-areas`
→ Accepts rows, then a slash, then the columns

**Defaults**
= `auto` : Takes up the next available cell in the Grid when it's their turn 

#### Application
= Left to right, top to bottom
→ Elements flow into the Grid one at a time
→ Taking a turn based on their natural order

**Capacity**
= Can do most things 
→ **ie** Naming lines

#### Warning 
= Cannot add BOTH `template-areas` naming & `repeat()` at the same time 
→ B/c setting would not be able to visually mimic the Grid 

#### Add `template-areas` naming 
= Define Tracks ** w/o** using `repeat()` in `grid-template`

**Example**
```
grid-template: ". rocky rocky ." 200px
               ". rocky rocky ." 1fr
               / 1fr 1fr 1fr 1fr;
```
= Same as:
```
grid-template-areas: ". rocky rocky ."
                     ". rocky rocky .";
```

#### Example Use Case
`grid-template: 50% 50% / 200px;`
= Creates a grid w/ 2 rows that are 50%  each & 1 column that is 200px wide

### Grid
#### Syntax
`grid`

#### Purpose
= Row properties, than /, then column properties 

#### Application
= Exact same as `grid-template`
→ Define rows and columns 

#### Values 
1. Row properties
2. Column properties
3. grid-auto-flow

### Gaps between Columns/Rows
#### Syntax
`grid-gap`

#### Purpose
= Sets both column and row gaps

#### Values 
= `*row gap* *column gap*`
→ With a Space between 

#### Example
`grid-gap: 30% 10%;`

## 5.2 Individual Elements 
### Column/Row 
#### Syntax
`grid-row/column: *start line* / *end line*`
= `*end line*` value - optional 
→ If no `*end line*` value: Will by default only set the `*start line*` value

#### Purpose
= Set both `start` & `end` values _at once_

#### Values
= `grid-column/row-start` & `grid-column/row-end` values
→ Separated by a slash 

= Accepts all values accepted normally by `start & `end`

#### Example Use Case
`grid-column: 2 / 4;`
= Sets grid element to start on 2nd vertical grid line & end on 4th grid line 
→ Functionally identical to...
```
grid-column-start: 2;
grid-column-end: 4;
```

### Area

...

# Part 6 Workflow
#### 1. Define Grid Tracks & Gaps 

#### 2. Flow Elements into Grid

#### 3. Adjust Size/Positions of Elements
= If needed

#### 4. Double check `grid-auto-flow` setting 
= Make sure Grid is flowing correctly
→ Comment out explicit sizes temporarily if needed

#### 5. Make sure elements are in their correct cells 

#### 6. Align and justify items
= If needed

...

# Part 7 Tips for Next Article
#### 1. Do not write so many notes
= If something has already been written: Do not repeat it

= Keep notes DRY 
→ Or else you will waste far too much time cutting & organizing afterwards

#### 2. Cut Details 
= Make article more digestible
→ Keep one copy for personal & Another for uploading

...

And that's it for my expanded and revised CSS Grid notes! I may return if I encounter anything unexpected in practice.

For my next article, I am considering 3 options: Going into the process I used to create a Texas Hold'em Game, Analysing TailwindCSS, or JavaScript Basics. 

Right now, I am leaning towards JavaScript Basics, as I think it is a good way to continue refreshing core concepts. 

Nonetheless, I think it is certainly advantageous to get to the other two topics at _some_ point.



With love,
Angeline 

P.S You're welcome to join my journey by checking out my [blogs](https://www.angelinewang.com/how-fast-can-you-learn) on founding a startup 🤍