What is the CSS grid?
As Flex box the grid is a default feature,
a default technology CSS ships with
this means you don't have to install it
through anything like this.
It's always there
where Flex box shines in one dimensional
layouts, we saw this,
we can use it greatly to align elements
in the role or in a column.
This works perfectly.
The grid shines whenever it comes to
two dimensional layouts.
This means, whenever we want to create the layout
where we have to control about the columns
and or the rows,
now in this and the next lectures,
we'll dive into the CSS grid basics.
You can find more detailed information about the CSS grid
towards the end of this module.
However, to get started here,
you can find this project attached to the lecture.
As you see, we just have the body element here,
which contains an unordered list
with several list items here, name card.
As we have these cards on our website,
if we check the code,
you see the same thing,
which has to have this basic HTML code
and in the styles file.
We have some styling for the body,
some styling for the unordered list
and some styling for the list items.
Nothing we don't know about so far.
If we look at the way our cards are aligned
at the moment though,
we have a default block element alignment.
So each element is sitting below the other one.
If we think back about our project,
to structure the lay out,
we want to create here is a layout
where we have two columns as a first step.
So in here with our eight cards,
this would mean that the
first column should have four cards.
And the second column should also have four cards.
How can we create such a layout with the grid now?
Well, the grid basically follows the core logic of Flex box.
Again, we can create a container,
a grid container,
which is the parent of our items inside our grid.
And then this flex container will allows us
to define what should happens with the
elements nested into it.
If we think about our project set up here,
this would mean that our unordered list here,
which holds the list items should
become our grid container
to do that.
We can go to our CSS code,
to the unordered list type selector,
and here add display grid
with this in place,
nothing changes, which is not correct.
You see that the distance between
our elements increased sort of margin.
So to say, and in our deaf tools,
we see that the grid option is now available.
If we click it as we did it
with the flex option here for Flex box
you see that somehow we have these counters
for the rows top to bottom
and for the columns left to right.
Okay. So far, this doesn't help us a lot.
How can we now create this two column layout?
Well, with the grid being applied,
we now have full control about
the way these elements are displayed
about the layouts of these elements inside our grid.
One option to therefore create
a predefined layout is with
the grid template columns property.
Now let's go to the code and let's add this.
So grid,
template,
columns.
What is this now?
Well, this
property allows us to predefine a specific
column count
inside of our grid.
Now you could say, well,
we want to have two columns
so I can just enter two. No,
that's not how it works.
We have to define a value
for each single column
that we want to create.
And each value has to specify
the width off that column, inside our grid.
At the moment, for example,
we have a width for the unordered list,
which is our container off the grid
of 800 pixels. Therefore we could say
we create one column with a width of
400 pixels.
Now we add a space and create a second column.
Also with 400 pixels
with this in place, you see,
we immediately created our two column layout.
And if we look at our unordered list,
you see that the entire content of that list is
800 pixels,
which is not occupied by the elements
inside our grid,
the area around here.
So the screen part is just a padding
that we added.
You can see this down here.
This is our padding.
However,
What happens if we don't exactly
used the entire width available?
Code, for example, in our code say
that the first column should have 400 pixels.
And the second one only 200,
what happens then
let's see you.
Well, D width used for our elements.
Indeed decreases. See right here,
the elements in the second column are smaller
and we have some unused space
in the right part of our grid.
This means our grid still could use
the entire width that we defined in here.
So our 800 pixels of the content,
but we only use the grid for this limited amount of space.
Now this can be an intended behavior
or a mistake. Therefore,
typically when working with such grid template columns,
we don't work with pixels here.
We use so-called fractions.
A fraction simply defines
the available space off the area,
wearable in the grid that we want
to apply for this specific column.
This means
if we change
our 400 pixels here
to one fraction
written FR
like this F R stands for fraction,
then the second column
occupies the 200 pixels that we
defined and see down here.
The first column occupies the remaining width.
The content still is 200 pixels here,
but as you see with the margin,
we use this entire space available
adding up to 600 pixels.
So this is a fraction.
We could also achieve the skull differently
if we go back and now say
that our second column should use one fraction
of the remaining space
and the first column should use two fractions.
What do you think will happen then?
Let's see.
Now our first column, again, uses more space.
Now we know that the entire width
is divided into free fractions.
Two of these fractions should be
applied for the first column, right here.
One fraction should be applied to the second column.
Again, you see the 200 pixels width here,
but if you check the developer tools,
you see that the margin now
is added to create this two fraction,
width in the end. For our purposes, still,
we can simply say that we want to have
one fraction for both the columns.
So one fracture, one fraction with that,
we have an even distribution between our columns,
besides our template columns.
We can also specify the gap,
the distance between our elements
at the moment.
This is defined by the margin of our elements in here,
but we can also define the space
between the different, well, areas,
the different elements inside our grid template
with a specific property.
This property, in our code here is called Gap.
Gap is a shorthand and defines the gap
between the front rows and front columns.
In our case, we have four different roles here
and two columns.
This means, we could say that for the roles.
We take a gap of 100 pixels between each of the rows,
then a space and maybe 200 pixels
as the gap between our two columns
with this in place.
You see that now the distance
between our different elements
increased significantly.
And if we, again, hover over our grid,
you see that the
maybe right here,
you see that the element area is this one here.
So it's the content and the margin,
but then these areas here,
this is the gap between the columns.
This is the gap between the rows.
Okay!
So it just looks a bit awkward,
but we can keep it for this fury part.
As I said, in this module,
we'll just dive into great basics
to be able to apply to our project,
but to be able to do so
one additional step is missing.
We want to have this element, this card,
which should occupy while the antivirus space, basically.
So the first card here should be
kind of using all the space
without having this fourth card here.
This is the next thing. We'll have a look at.