Mastering CSS Grid
Angeline Wang
Posted on August 4, 2022
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.
This one I learned through Grid Garden, & later updated this article with content from Grid Critters...
...
Part 1 CSS Grid vs Other Options
1.1 CSS Grid vs Flexbox
Grid Advantage
= Can easily position elements in 2 dimensions:
- Columns
- 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
- Elements in Grid are equal heighted rows
- 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
- Set number of columns/rows
- 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 gaps into account
%
= A Percentage of the Grid Size
→ Does not take gaps 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 gaps
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:
- Minimum Size of Track
- 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:
-
Direction (
roworcolumn) -
Packing (
sparseordense)
= 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 items 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 & gaps
Application
= Adding a column gap
→ Widens the distance between the columns
→ && spacing on outside of columns shrink
Implications
= gaps 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
= gaps 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
endandstartwould 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;
}
=
- Element starts at 3rd row line & ends at 4th row line → Taking up a single row (track 3)
- Starts at 2nd column line & ends at 3rd column line → Taking up a single column (track 2)
- 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)
endwithspan. 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. 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. && 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
= 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 value: 0
Example
grid-area: 4 some-grid-area / 2 another-grid-area;
5. span && [ || ] 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
= 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 is omitted
= Defaults to 1
→ Invalid 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
- Row properties
- Column properties
- 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 on founding a startup 🤍
Posted on August 4, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related