Learn the basics of CSS Grid in 100 seconds. Grid 🍱⚡ is a powerful tool that can build layouts in the context of columns and rows.  It's not easy to learn, but can dramatically simplify CSS positioning code for responsive designs. 

Stay tuned for a full grid project next week! https://fireship.io/tags/css/

Grid Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

#css #tutorial #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:20:50.408Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
42acc3b4-bc5d-49ce-aea8-0f79d1819461
640defb95abe75e227e49f2008a6cbaa2556196468b91220c4499e216acc1e66
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
CSS Grid.
A system for laying out items across a movable set of horizontal and vertical lines.
Inside a grid, we have invisible lines that divide columns and rows.
The The space between 2 parallel grid lines is known as a grid track and the space between 4 lines is known as a grid area.
In your HTML, Start with a parent element to serve as your grid container.
Then, all of its children will automatically become grid items.
Let's imagine we wanted to build a web with a holy grail layout.
In the HTML, we have a container with 5 elements inside.
We'll start by setting the container's display property to grid.
Now, open your app in Firefox to visualize the grid lines, tracks, and areas.
It helps to imagine your website as an Excel spreadsheet.
In each individual cell, add a label that represents the Element that should appear there.
Each cell in the grid represents 1 fractional unit.
In the middle, we have an advertisement, the main content, and the sidebar.
Then, have the top bar taking up 3 cells on the top and the footer on the bottom.
Notice how this represents a 3 by 3 grid and we can use this as the value for The grid template areas property.
Now, we need to tell the children which grid area that they take up.
We can do that by providing the name to the grid area property.
That gives us the right layout, but now we want to adjust the size of the rows and columns.
Currently, each column is taking up 1 third or one fractional unit of the available space.
We can change the width of the middle column by setting it to a fixed pixel value, or change the ratio by giving it 3 fractional units.
Likewise, we can change the height of rows using the grid template rows property.
If we want To add spacing between our grid lines, we can use the grid gap property.
And we can center the children vertically or horizontally using justify items or or align items.
And make sure to check out the min, max, and repeat functions to avoid duplication on larger grids.
This has been CSS Grid in 100 seconds.
Stay Stay tuned for a full grid project in a few days.
And make sure to hit the like button if you want to see more short videos like this.
Thanks for watching and I will see you in the next one.

Speaker 0: CSS Grid. A system for laying out items across a movable set of horizontal and vertical lines. Inside a grid, we have invisible lines that divide columns and rows. The The space between 2 parallel grid lines is known as a grid track and the space between 4 lines is known as a grid area. In your HTML, Start with a parent element to serve as your grid container.

Then, all of its children will automatically become grid items. Let's imagine we wanted to build a web with a holy grail layout. In the HTML, we have a container with 5 elements inside. We'll start by setting the container's display property to grid. Now, open your app in Firefox to visualize the grid lines, tracks, and areas.

It helps to imagine your website as an Excel spreadsheet. In each individual cell, add a label that represents the Element that should appear there. Each cell in the grid represents 1 fractional unit. In the middle, we have an advertisement, the main content, and the sidebar. Then, have the top bar taking up 3 cells on the top and the footer on the bottom.

Notice how this represents a 3 by 3 grid and we can use this as the value for The grid template areas property. Now, we need to tell the children which grid area that they take up. We can do that by providing the name to the grid area property. That gives us the right layout, but now we want to adjust the size of the rows and columns. Currently, each column is taking up 1 third or one fractional unit of the available space.

We can change the width of the middle column by setting it to a fixed pixel value, or change the ratio by giving it 3 fractional units. Likewise, we can change the height of rows using the grid template rows property. If we want To add spacing between our grid lines, we can use the grid gap property. And we can center the children vertically or horizontally using justify items or or align items. And make sure to check out the min, max, and repeat functions to avoid duplication on larger grids.

This has been CSS Grid in 100 seconds. Stay Stay tuned for a full grid project in a few days. And make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the next one.
CSS Grid. A system for laying out items across a movable set of horizontal and vertical lines. Inside a grid, we have invisible lines that divide columns and rows. The The space between 2 parallel grid lines is known as a grid track and the space between 4 lines is known as a grid area. In your HTML, Start with a parent element to serve as your grid container. Then, all of its children will automatically become grid items. Let's imagine we wanted to build a web with a holy grail layout. In the HTML, we have a container with 5 elements inside. We'll start by setting the container's display property to grid. Now, open your app in Firefox to visualize the grid lines, tracks, and areas. It helps to imagine your website as an Excel spreadsheet. In each individual cell, add a label that represents the Element that should appear there. Each cell in the grid represents 1 fractional unit. In the middle, we have an advertisement, the main content, and the sidebar. Then, have the top bar taking up 3 cells on the top and the footer on the bottom. Notice how this represents a 3 by 3 grid and we can use this as the value for The grid template areas property. Now, we need to tell the children which grid area that they take up.
We can do that by providing the name to the grid area property. That gives us the right layout, but now we want to adjust the size of the rows and columns. Currently, each column is taking up 1 third or one fractional unit of the available space. We can change the width of the middle column by setting it to a fixed pixel value, or change the ratio by giving it 3 fractional units.
geometry
Likewise, we can change the height of rows using the grid template rows property. If we want To add spacing between our grid lines, we can use the grid gap property. And we can center the children vertically or horizontally using justify items or or align items. And make sure to check out the min, max, and repeat functions to avoid duplication on larger grids. This has been CSS Grid in 100 seconds. Stay Stay tuned for a full grid project in a few days. And make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the next one.
CSS Grid. A system for laying out items across a movable set of horizontal and vertical lines. Inside a grid, we have invisible lines that divide columns and rows. The The space between 2 parallel grid lines is known as a grid track and the space between 4 lines is known as a grid area. In your HTML, Start with a parent element to serve as your grid container. Then, all of its children will automatically become grid items. Let's imagine we wanted to build a web with a holy grail layout. In the HTML, we have a container with 5 elements inside. We'll start by setting the container's display property to grid. Now, open your app in Firefox to visualize the grid lines, tracks, and areas. It helps to imagine your website as an Excel spreadsheet. In each individual cell, add a label that represents the Element that should appear there. Each cell in the grid represents 1 fractional unit. In the middle, we have an advertisement, the main content, and the sidebar. Then, have the top bar taking up 3 cells on the top and the footer on the bottom. Notice how this represents a 3 by 3 grid and we can use this as the value for The grid template areas property. Now, we need to tell the children which grid area that they take up. We can do that by providing the name to the grid area property. That gives us the right layout, but now we want to adjust the size of the rows and columns. Currently, each column is taking up 1 third or one fractional unit of the available space. We can change the width of the middle column by setting it to a fixed pixel value, or change the ratio by giving it 3 fractional units. Likewise, we can change the height of rows using the grid template rows property. If we want To add spacing between our grid lines, we can use the grid gap property. And we can center the children vertically or horizontally using justify items or or align items. And make sure to check out the min, max, and repeat functions to avoid duplication on larger grids. This has been CSS Grid in 100 seconds. Stay Stay tuned for a full grid project in a few days. And make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the next one.
CSS
css
Grid.
grid
A
a
system
system
for
for
laying
laying
out
out
items
items
across
across
a
a
movable
movable
set
set
of
of
horizontal
horizontal
and
and
vertical
vertical
lines.
lines
Inside
inside
a
a
grid,
grid
we
we
have
have
invisible
invisible
lines
lines
that
that
divide
divide
columns
columns
and
and
rows.
rows
The
the
The
the
space
space
between
between
2
2
parallel
parallel
grid
grid
lines
lines
is
is
known
known
as
as
a
a
grid
grid
track
track
and
and
the
the
space
space
between
between
4
4
lines
lines
is
is
known
known
as
as
a
a
grid
grid
area.
area
In
in
your
your
HTML,
html
Start
start
with
with
a
a
parent
parent
element
element
to
to
serve
serve
as
as
your
your
grid
grid
container.
container
Then,
then
all
all
of
of
its
its
children
children
will
will
automatically
automatically
become
become
grid
grid
items.
items
Let's
let's
imagine
imagine
we
we
wanted
wanted
to
to
build
build
a
a
web
web
with
with
a
a
holy
holy
grail
grail
layout.
layout
In
in
the
the
HTML,
html
we
we
have
have
a
a
container
container
with
with
5
5
elements
elements
inside.
inside
We'll
we'll
start
start
by
by
setting
setting
the
the
container's
container's
display
display
property
property
to
to
grid.
grid
Now,
now
open
open
your
your
app
app
in
in
Firefox
firefox
to
to
visualize
visualize
the
the
grid
grid
lines,
lines
tracks,
tracks
and
and
areas.
areas
It
it
helps
helps
to
to
imagine
imagine
your
your
website
website
as
as
an
an
Excel
excel
spreadsheet.
spreadsheet
In
in
each
each
individual
individual
cell,
cell
add
add
a
a
label
label
that
that
represents
represents
the
the
Element
element
that
that
should
should
appear
appear
there.
there
Each
each
cell
cell
in
in
the
the
grid
grid
represents
represents
1
1
fractional
fractional
unit.
unit
In
in
the
the
middle,
middle
we
we
have
have
an
an
advertisement,
advertisement
the
the
main
main
content,
content
and
and
the
the
sidebar.
sidebar
Then,
then
have
have
the
the
top
top
bar
bar
taking
taking
up
up
3
3
cells
cells
on
on
the
the
top
top
and
and
the
the
footer
footer
on
on
the
the
bottom.
bottom
Notice
notice
how
how
this
this
represents
represents
a
a
3
3
by
by
3
3
grid
grid
and
and
we
we
can
can
use
use
this
this
as
as
the
the
value
value
for
for
The
the
grid
grid
template
template
areas
areas
property.
property
Now,
now
we
we
need
need
to
to
tell
tell
the
the
children
children
which
which
grid
grid
area
area
that
that
they
they
take
take
up.
up
We
we
can
can
do
do
that
that
by
by
providing
providing
the
the
name
name
to
to
the
the
grid
grid
area
area
property.
property
That
that
gives
gives
us
us
the
the
right
right
layout,
layout
but
but
now
now
we
we
want
want
to
to
adjust
adjust
the
the
size
size
of
of
the
the
rows
rows
and
and
columns.
columns
Currently,
currently
each
each
column
column
is
is
taking
taking
up
up
1
1
third
third
or
or
one
one
fractional
fractional
unit
unit
of
of
the
the
available
available
space.
space
We
we
can
can
change
change
the
the
width
width
of
of
the
the
middle
middle
column
column
by
by
setting
setting
it
it
to
to
a
a
fixed
fixed
pixel
pixel
value,
value
or
or
change
change
the
the
ratio
ratio
by
by
giving
giving
it
it
3
3
fractional
fractional
units.
units
Likewise,
likewise
we
we
can
can
change
change
the
the
height
height
of
of
rows
rows
using
using
the
the
grid
grid
template
template
rows
rows
property.
property
If
if
we
we
want
want
To
to
add
add
spacing
spacing
between
between
our
our
grid
grid
lines,
lines
we
we
can
can
use
use
the
the
grid
grid
gap
gap
property.
property
And
and
we
we
can
can
center
center
the
the
children
children
vertically
vertically
or
or
horizontally
horizontally
using
using
justify
justify
items
items
or
or
or
or
align
align
items.
items
And
and
make
make
sure
sure
to
to
check
check
out
out
the
the
min,
min
max,
max
and
and
repeat
repeat
functions
functions
to
to
avoid
avoid
duplication
duplication
on
on
larger
larger
grids.
grids
This
this
has
has
been
been
CSS
css
Grid
grid
in
in
100
100
seconds.
seconds
Stay
stay
Stay
stay
tuned
tuned
for
for
a
a
full
full
grid
grid
project
project
in
in
a
a
few
few
days.
days
And
and
make
make
sure
sure
to
to
hit
hit
the
the
like
like
button
button
if
if
you
you
want
want
to
to
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how to use CSS Grid in building a web layout. They demonstrate how to set up the grid, add labels, and use the grid template area property. The speaker also explains how to adjust the width and height of rows and columns, and how to use the grid gap property to center the children vertically or horizontally. The video ends with a reminder to check the Min, Max, and repeat functions for alignment.
CSS Grid in 100 Seconds
CSS Grid. A system for laying out items across a movable set of horizontal and vertical lines. Inside a grid, we have invisible lines that divide columns and rows. The The space between 2 parallel grid lines is known as a grid track and the space between 4 lines is known as a grid area. In your HTML, Start with a parent element to serve as your grid container. Then, all of its children will automatically become grid items. Let's imagine we wanted to build a web with a holy grail layout. In the HTML, we have a container with 5 elements inside. We'll start by setting the container's display property to grid. Now, open your app in Firefox to visualize the grid lines, tracks, and areas. It helps to imagine your website as an Excel spreadsheet. In each individual cell, add a label that represents the Element that should appear there. Each cell in the grid represents 1 fractional unit. In the middle, we have an advertisement, the main content, and the sidebar. Then, have the top bar taking up 3 cells on the top and the footer on the bottom. Notice how this represents a 3 by 3 grid and we can use this as the value for The grid template areas property. Now, we need to tell the children which grid area that they take up. We can do that by providing the name to the grid area property. That gives us the right layout, but now we want to adjust the size of the rows and columns. Currently, each column is taking up 1 third or one fractional unit of the available space. We can change the width of the middle column by setting it to a fixed pixel value, or change the ratio by giving it 3 fractional units. Likewise, we can change the height of rows using the grid template rows property. If we want To add spacing between our grid lines, we can use the grid gap property. And we can center the children vertically or horizontally using justify items or or align items. And make sure to check out the min, max, and repeat functions to avoid duplication on larger grids. This has been CSS Grid in 100 seconds. Stay Stay tuned for a full grid project in a few days. And make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the next one.
The speaker explains how to use CSS Grid in building a web layout. They demonstrate how to set up the grid, add labels, and use the grid template area property. The speaker also explains how to adjust the width and height of rows and columns, and how to use the grid gap property to center the children vertically or horizontally. The video ends with a reminder to check the Min, Max, and repeat functions for alignment.