Learn CSS Grid - A 13 Minute Deep Dive
Summary
TLDRThis video script offers an in-depth tutorial on CSS Grid, detailing how to create a two-dimensional layout. It explains the fundamental concepts such as rows, columns, cells, and tracks, and demonstrates how to define and manipulate them using HTML and CSS properties like 'grid-template-rows' and 'grid-template-columns'. The script covers positioning items using 'grid-row' and 'grid-column', the shorthand properties, and the 'span' keyword. It also explores advanced techniques like 'grid-area', implicit grid, 'grid-auto-rows', 'grid-autoflow', and 'grid-auto-columns'. The tutorial further delves into responsive design without media queries using 'autofit' and 'minmax' functions, and concludes with tips on aligning items and the grid itself within the container.
Takeaways
- π CSS Grid is a two-dimensional layout system that allows for items to be placed both horizontally and vertically.
- π A grid is made up of cells, rows, columns, and tracks, with each number representing a line that can be used to position items.
- π» To create a grid in HTML, you need a container (usually a div) with a class and items (also divs) inside it, each with a class.
- π¨ In CSS, setting `display: grid;` on a container is the first step to define a grid, but you also need to specify the number of rows and columns using `grid-template-rows` and `grid-template-columns`.
- π’ Defining rows and columns involves specifying track sizes, which can be done in pixels, percentages, or using the `fr` unit for fractional units of available space.
- π― Items can be positioned within the grid using `grid-row-start`, `grid-row-end`, `grid-column-start`, and `grid-column-end`, or shorthand properties like `grid-row` and `grid-column`.
- π The `span` keyword simplifies the process of making an item span multiple cells by specifying the number of cells to span from the current position.
- π The `grid-area` property is a powerful tool that combines the functionality of multiple properties, allowing you to define an item's position with just one value.
- π CSS Grid simplifies layering items on top of each other by naturally stacking them based on their order in the HTML and grid positions.
- π The `grid-auto-rows` and `grid-auto-columns` properties allow you to define the size of rows and columns for any new implicit grid that gets created when items are added outside the explicit grid.
- π§ The `minmax()` function within `grid-template-columns` or `grid-template-rows` can be used to set minimum and maximum sizes for grid tracks, ensuring items maintain a certain size.
- π The `repeat()` notation provides a shorthand for repeating a pattern of row or column sizes, reducing the need for repetitive code.
- π The `grid-gap` property adds consistent spacing between rows and columns, improving the overall layout and aesthetics of the grid.
- π± The `autofit` and `autofill` keywords in `grid-template-columns` can create a responsive grid layout without the need for media queries, making the design adapt to different screen sizes.
Q & A
What is a grid in CSS and how is it different from other layout models?
-A grid in CSS is a two-dimensional layout system that allows for the placement of elements both horizontally and vertically in a structured grid pattern. It differs from other layout models like Flexbox by providing a more comprehensive approach to designing complex layouts with rows and columns.
How do you define a grid container in HTML?
-To define a grid container in HTML, you use a container element, typically a div, with a class name such as 'container'. Inside this container, you place child elements, which are also divs, with a class name like 'item'.
What properties are used to define the structure of rows and columns in a CSS grid?
-The properties used to define the structure of rows and columns in a CSS grid are 'grid-template-rows' and 'grid-template-columns'. These properties allow you to specify the size of each row and column in the grid.
Can you explain the concept of 'fr' units in CSS grid?
-The 'fr' unit in CSS grid represents a fraction of the available space in the grid container. It allows for flexible sizing where columns or rows can grow or shrink to fill the available space proportionally.
How can you position items within a grid without specifying line numbers?
-You can position items within a grid without specifying line numbers by using the 'grid-area' property with the 'grid-template-areas' shorthand. This allows you to assign named areas to the grid and then place items by referring to these names.
What is the 'auto-fit' and 'auto-flow' properties in CSS grid and how do they help in creating a responsive layout?
-The 'auto-fit' property allows items to automatically fit into the available space, wrapping onto the next row when necessary. 'Auto-flow' property, when set to 'column', ensures that new items are placed in a new column when the previous one is full. Together, they help create a responsive grid layout without the need for media queries.
How do you create gaps between rows and columns in a CSS grid?
-You create gaps between rows and columns in a CSS grid using the 'grid-gap' property. If you assign one value, it applies the same gap to both rows and columns. If you assign two values, the first is for the rows and the second is for the columns.
What is the purpose of 'minmax()' function in grid-template-columns?
-The 'minmax()' function in 'grid-template-columns' is used to set a minimum and maximum size for grid columns. It ensures that columns do not shrink below the minimum size and do not grow beyond the maximum size, providing control over the column's responsive behavior.
How can you align items within a grid both horizontally and vertically?
-You can align items within a grid using the 'justify-items' and 'align-items' properties, which control the alignment along the row and column axes respectively. For individual items, you can use 'justify-self' and 'align-self' properties.
What is the difference between 'grid-row' and 'grid-column' shorthand properties?
-The 'grid-row' and 'grid-column' shorthand properties are used to set the start and end lines for an item's placement within the grid. The first value is the starting line, and the second value is the ending line, separated by a slash. They simplify the process of positioning items without writing out all four individual properties.
How does the 'z-index' property affect layering of grid items?
-The 'z-index' property determines the stacking order of grid items. Items with a higher 'z-index' value are rendered on top of those with a lower value, allowing for layering effects where one item appears over another.
Outlines
π Understanding CSS Grid Basics
This paragraph introduces the concept of CSS grids, explaining that grids are two-dimensional structures where items can be placed horizontally, vertically, or in a combination of both. The paragraph covers the basic components of a grid, including row lines, column lines, cells, and tracks. It also details how to create a grid in HTML using a container and items, and how to define rows and columns in CSS using `grid-template-rows` and `grid-template-columns` properties. The explanation includes setting specific pixel values to create uniform grid structures and positioning items within the grid using properties like `grid-row-start`, `grid-row-end`, `grid-column-start`, and `grid-column-end`. Finally, it introduces shorthand properties and the `span` keyword for more efficient item placement.
π§ Managing Implicit Grids and Responsive Layouts
This paragraph dives into handling implicit grids, which are automatically generated when more items are added to a grid than the defined rows and columns can accommodate. It explains that implicit grids do not inherit the defined grid template properties and introduces the `grid-auto-rows` and `grid-auto-columns` properties to set sizes for rows and columns in implicit grids. The paragraph also covers the use of fractional units (`fr`) in grid templates, the `minmax()` function for setting flexible sizes, and the `repeat()` notation for avoiding repetitive code. Additionally, it discusses how to add gaps between grid items using the `grid-gap` property and introduces the `grid-template-areas` property for assigning specific grid areas to items, which can simplify positioning but complicates layering.
ποΈ Fine-Tuning Grid Item and Grid Alignment
This paragraph focuses on aligning grid items and the grid itself. It starts by explaining the default behavior of `justify-items` and `align-items`, which stretch items to fill the grid. It then shows how to change the alignment using `start`, `end`, and `center` values, and how to override these settings for individual items using `justify-self` and `align-self`. The paragraph also describes how to align the entire grid within its container using `justify-content` and `align-content`, with options like `space-between`, `space-around`, and `space-evenly`. Lastly, it presents a method for creating responsive grids without media queries using the `autofit` keyword, allowing the grid to automatically adjust as items reach their minimum size, ensuring a flexible and responsive layout.
Mindmap
Keywords
π‘CSS Grid
π‘Container
π‘Items
π‘Grid Lines
π‘Cells
π‘Tracks
π‘Grid Template Areas
π‘Implicit Grid
π‘Fractional Unit (fr)
π‘Grid Gap
π‘Autofit
Highlights
Grids are two-dimensional, allowing for horizontal and vertical placement of items.
Each number in a grid represents a line, with separate lines for rows and columns.
Grids consist of cells, where each square is a cell, and tracks, which are rows and columns.
Creating a grid in HTML involves a container div and item divs, with specific classes.
CSS grid display is activated by setting the display property to 'grid'.
Grid template rows and columns properties define the structure of the grid.
Rows and columns can be defined with pixel values, creating tracks of specified sizes.
Items can be positioned in a grid using grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties.
Shorthand properties grid-row and grid-column simplify item positioning.
The 'span' keyword allows items to span a number of cells without specifying exact lines.
Grid area property simplifies positioning by taking start and end lines for rows and columns.
CSS Grid allows for easy layering of items without absolute positioning.
Implicit grid is created when items are added beyond the defined grid size, adding new rows or columns.
Grid auto-rows property sets the size of rows in the implicit grid.
Grid autoflow property controls the direction of the implicit grid, either row or column.
Fractional unit 'fr' allows columns to take an equal fraction of the available space.
Min-max function can set minimum and maximum sizes for grid columns.
Repeat notation simplifies the definition of repeated values in grid template rows and columns.
Grid gap property adds consistent spacing between rows and columns.
Grid template areas property allows for naming and positioning items based on grid sections.
Justify items and align items properties control the alignment of all items within the grid.
Justify self and align self properties can individually adjust item alignment within the grid.
Justify content and align content properties align the grid itself within the container.
Autofit keyword in grid template columns creates a responsive grid without media queries.
Transcripts
grids are two-dimensional I can place
things on it horizontally vertically and
both simultaneously actually I can
position items in any way I want even
stacked each number represents a line
these lines are row lines and these
lines are column lines our grid is made
up of cells each square is a cell and
finally our grid is also made up of
tracks these are the rows and these are
the columns
creating a grid starts in the HTML we
need a container and some items inside
of it the container is a div with the
class of container and the items are
divs with the class of item item 1 2 and
3. in our CSS we give the container the
display of grid
we see nothing happened but this is
because we need to tell grid how many
rows and columns we want to find to
Define rows and columns we use the grid
template rows and grid template columns
properties
they work by defining a track for each
value that you pass it if I give 100
pixels to the columns now I have one
column of 100 pixels if I add a second
value of 100 pixels now I have two
columns of 100 pixels and so on
I'll copy the values from my grid
template columns and paste them in the
grid template rows now I have a grid
with six rows and six columns and all of
the cells have the same size if I want
to position an item I can select it and
give it the grid row start grid row and
grid column start grid column and
properties
inside of each we'll go some line
numbers let's say I want item 1 to look
like this then that means item 1 starts
on line 1 of both the rows and the
columns we also see that item 1 ends on
the third line of the rows and ends on
the fifth line of the columns the other
two items were pushed because we aren't
explicitly defining their position
writing these four properties each time
you want to position something is a bit
much you can instead use these two
shorthand properties grid row and grid
column
like the other properties these also
take inline numbers as values the first
value is the starting line the second is
the ending line and they need to be
separated by a slash
I want my second item to span two rows
and columns I could give it a grid row
of one and three and a grid column of 5
and 7 and this works amazingly but an
easier way to achieve this is with this
pan keyword instead of the values that I
currently have I can just use this pan
keyword with the number of cells that I
want to span basically this pan keyword
is saying from wherever you currently
are span yourself this number of times
this is easy to read and is also why a
lot of people love this pan keyword but
the main downfall of using this is it
doesn't allow you to explicitly Define
your starting and ending position and as
a consequence our item will be pushed
away if I increase the size of a nearby
item like item 1. if you don't care
about anchoring an item into a specific
position then this pan keyword is okay
to use
using grid row and grid column is good
but there's an even faster property grid
area takes four values the first is the
starting line on the rows the second is
the starting line on the columns the
third is the ending line on the rows and
the fourth is the ending line on the
columns if I want item 3 to fill out the
rest of the available space I can give
it the grid area with the starting row
of three the ending column of 1 the
ending row of 7 and the ending column of
7. I can also use the negative numbers
that we see on our grid so instead of 7
and 7 I could say -1 and -1 and this
will work the same this one property
does the job of six properties so
personally that's the one that I always
use
before CSS grid layering an item on top
of another was painful you had to use an
absolute positioning and then try to
position the item using the top right
bottom and left properties but with CSS
grid you just position your item where
you want it to be and if that happens to
be on top of another item then that
creates layering super easy I want item
2 to be right here touching both the
item 1 and item 3. to do this I'll
remove the grid row and grid column and
use the grid area instead the row starts
at two the column starts at four the row
ends at four and the column ends at six
our item needs to be on top all we have
to do is give it a z index of one and
now item two is layered on top of both
item 1 and item 3.
now we see our items are filling out all
of the available space except maybe for
the top right corner I'll make item 1
span all of the columns just to fill
everything up
so now that all the cells are occupied
what would happen if I added another
item in our HTML
despite not having any room left our
grid added a new row for item 4. when
items are added outside of the
explicitly defined grid this is referred
to as an implicit grid notice how item 4
is smaller than the others that's
because the implicit grid doesn't
inherit the values that we set in the
grid template rows and grid template
columns properties but what we can do is
add the grid Auto rows property on our
container
what this does is sets the size of the
rows on any implicit grid that gets
created when I set it to 100 pixels now
our implicit grid has a row of 100
pixels
by default our implicit grid added a row
but we can change this with the grid
autoflow property and set it to column
now any implicit grid that gets created
will be created as a column instead with
the columns being the new default for
our implicit grids we can use grid Auto
columns to define the size of those
columns and set it to 100 pixels
now let's reset our grid by commenting
out almost everything except the grid
template rows and grid template columns
inside the grid template rows and
columns can go more than just pixel
units you can use M's Rams percentages
Etc but there is one called the
fractional unit that you should know
about I'm going to give the rows two
values of 100 pixels and I'll give the
columns three values of one fr
the FR unit represents a fractional
value of the available space and now
we've got three columns each one filling
out the available space equally if I set
the second FR to 2 or 3 we see the
column occupying more of the available
space
you can also mix the FR units with other
units without any issues so for example
I can make the first value be 100 pixels
in general you can mix and match values
without any problems
when I resize the page some of the items
get Way Too Thin to set a minimum width
we can use the min max function inside
our grid template columns I'll use the
min max function on the second column it
takes two arguments the first is the
minimum size and the second is the
maximum size I'll set the minimum size
to 100 pixels and the maximum size to
3fr now our item will stop shrinking
whenever it hits 100 pixels another
useful function is the repeat notation
I'll use this one on my grid template
rows the way the repeat notation works
is by taking two arguments the first
argument is the number of times you want
to repeat a value and the second
argument is the value you want to have
repeated we had two values of 100 pixels
so I'll set the first argument to 2 and
the second argument to 100 pixels
now the rows are just like they were
before two rows of 100 pixels but now at
least we aren't repeating ourselves we
can also add gaps to our grid with the
grid Gap property if you assign it one
value then it will add gaps equally to
both the rows and the columns if you
assign it two values the first is the
gaps on the rows and the second value is
the gaps on the columns
I'm going to replace the values in my
grid template rows for 100 pixels 300
pixels and 100 pixels I'll also replace
the values inside my grid template
columns for 1fr and 3fr
I'm going to show you another way of
positioning items in your grid that
doesn't require keeping track of the
line numbers in my container I'll add
the grid template areas property
as a value I'll give it three sets of
single quotes stacked on top of one
another with a semicolon after the last
set of single quotes
looking at my grid template rows I see I
defined three rows and looking at my
grid template columns I see I defined
two columns we have three rows and two
columns well inside the first set of
single quotes I'll say header and header
inside the second set of single quotes
I'll say Main and aside inside the third
set of single quotes I'll say footer and
footer the reason I added three sets of
single quotes is because I know my grid
only has three rows and the reason I
added two values inside of each of the
single quotes is because I know my grid
only has two columns each set of single
quotes represents a row and each value
inside of them represents a column
looking at my grid we see the developer
tools added the names we set inside the
grid template areas in the appropriate
position now all I have to do is give
each item the grid area property and
assign them the section I want them to
occupy I want item 1 to be the header I
want item 2 to be the main I want item 3
to be the SI and I want item 4 to be the
footer
now we see each item is occupying the
section we assign them to by the way
this was just an example I don't think
I'd have one grid for all four sections
and a real website I'd probably have
multiple different grids across my page
for the various sections and components
also this way of positioning things is
fun but it makes layering items more
difficult it can be done though it's
just more difficult
we're almost done I'll reset my grid by
commenting out pretty much everything
and set a repeat of four 100 pixels on
the rows and a repeat of 4 1fr on the
columns our items are currently
stretching both on the row axis and the
column axis and this is because on our
container there's two properties we
don't currently have but that in the
background have a default of stretch the
justify items and the Align items
properties both have a default value of
stretch I can change them to either
start and baseline or Center
justify items align items on the row
axis so if I change it justify items to
anything else like start we see our
items are at the start of the row axis
but still in the center of the column
axis if I change align items to anything
else like end now our items are still at
the start of the row axis but are now at
the end of the column axis these
properties are affecting all of the
items but if we wanted to align items
individually we can use the justify self
and the outline self properties on the
items themselves so for example if I
wanted to overwrite the row alignment of
item 1 I could use the adjustify self
and set it to anything else like Center
and if I wanted to also overwrite the
column alignment I would use the Align
self property maybe this one I'll set it
to stretch
justify items and align items where to
align our items inside our grid but we
can also align the grid itself along the
container so for example I'll clean
things up by removing everything except
this play of grid grid template rows and
grid template columns I'll also add a
height to the container of 600 pixels
I'll say that we have two rows instead
of four and also two columns instead of
four I'll also replace the 1fr with 100
pixels now we have a smaller Grid in
comparison to The Container we can align
the grid with justify content and align
content they both take the same values
start
and Center
Baseline
space between
space around
and space evenly
justify content aligns the grid along
the row axis and align content aligns
the grid along the column axis
the last thing I want to show you is a
cool trick for creating a responsive
grid that requires zero media queries
that's right responsive without media
queries once more I'll reset my grid
I'll set up a standard grid the grid
template rows can have a repeat of four
100 pixels and the grid template columns
can have a repeat of four and a min max
of 100 pixels and one fr
if I resize it it'll eventually break to
fix this normally I would add a media
query and change things based off the
viewport width but instead all I can do
is in my grid template columns instead
of repeating four times I can replace
four with the autofit keyword
now when the items reach their minimum
size of 100 pixels the autofit keyword
will make the items autofit and wrap
onto the next row creating a grid that
is automatically responsive
and there you have it if this video
helped you in any way then it achieved
its goal also I would be really honored
if you considered subscribing to the
channel and liking the video
I also have a flexbox video if you want
to check that out anyways thanks for
watching and have a wonderful day
Browse More Related Video
CSS Grid Layout In One Video | Complete Web Development Course #26
Figma Tutorial: Layout Grids
C# WPF Tutorial #5 - Grid Control for Basic Responsive Layouts
π― CSS GRID en 10 minutos (DESDE CERO).
One Line Of Code By Master CSS
Words in the middle of the horizontal lines (CSS Mastery # 007) | Coder Champ
5.0 / 5 (0 votes)