As I mentioned, before getting into coding our form, I just want to talk about the grid layout. And
all
I mean by grid layout, is using CSS to design the layouts of your page.
Taking a step back, every app, website or application layout you make, or have seen, is essentially
just boxes placed within boundaries.
So then what is a grid?
Well, in very simple terms, a grid is just lines - horizontal and vertical lines that define the placement
of other design elements.
But in order to grasp the grid, you need to know about a few key concepts that I'm going to be discussing
with you now.
And they are the grid container, the grid cell and the grid area.
So what are they?
Well, firstly, the grid container.
The grid container is just the parent that contains all of the items inside of the grid.
In other words, the grid container defines the initial placement of the grid lines, both vertical
and horizontal.
All right.
Makes sense.
That's the grid container.
Then we've got a grid cell.
Very simplistically, it's the smallest space in a grid layout, and it's bounded by 4 grid lines.
Very simple.
And then we've got finally the grid area.
The grid area is an area covering the grid.
I know it sounds weird.
Basically, it's just how much your element is covering the grid.
It could be as small as the area contained within a grid cell.
Or it can be as large as all the cells within the entire grid.
So there we go.
That's the container, the cell and the area.
Let me show you with a quick picture.
Right.
You can define your entire web page with a block of squares.
Here we've done them each equal size for width and height, but you don't have to.
The entire area is the grid container, right.
One of those areas is called a grid cell.
And then the grid area could be a grid cell, but it can also be more.
For example, we could have a grid area taking up two cells.
So this is how the grid layout works.
But let me jump over to the text editor and let me just show you very quickly on a simple div element
how we can define a grid layout.
Now that you understand the basic terminologies, let's get cracking.
Let's understand how this works.
How do you define a grid?
Well, remember we've used flexbox in this course, and just like flexbox, everything begins with a
one liner.
Here,
we need to set the display property to grid.
But let me show you what I mean.
So, let's create a very simple HTML file.
Within here
we can have a head and a style section, but let's leave that for now.
Let's create a body.
And in our body I want to create a div and within the div let's create an h2 heading called "Hello".
If we save this, refresh the browser,
there we go.
We've got "Hello" on the screen - and this is what you would expect.
So how do we define a grid?
Well, we can access our div.
Let's say we want this to be our grid container.
Within this div, let's set its display property to grid.
That's all we have to do.
And you'll notice that it's added some padding, right?
Let's comment that out and save again.
You can see, we've got Hello.
If we turn it into a grid, it does have default padding and styling.
So let's look at our browser
now. What's interesting here is have a look - in our DOM
we've got this word grid. And if we click on that, we can see our grid now consists of literally one
grid, one piece or one box, one cell.
And that Hello now is centered within the middle of that cell, that grid.
And if you scroll down, you can see here is the default size of that content.
Okay, so pretty straightforward. But, a grid without columns and rows is kind of pointless, right?
So obviously when we're dealing with grids, we need to create columns and rows.
And the two properties we use for that is grid-template-columns and the grid-template-rows property.
How do you use them?
Well, what better way than to just show you?
All right.
So we've set its display property to grid.
Let's say we want three columns here, grid-template-columns.
And now we can define the width of each column.
Let's say 100 pixels, 200 pixels and 300 pixels.
If we save this, go back to the browser, look at our grid.
We've got 3 cells now.
How awesome is that?
And to show you how this is used, we can literally copy our h2 tag two times, go back to the browser
and there we go.
They are literally placed at the beginning of every single cell.
So it's very, very useful.
But like I mentioned, we can also define how many rows we want, right?
So we've used grid-template-rows.
Now we can use grid-template ....
sorry, we've used grid-template-columns,
now I want to use grid-template-rows and we can define the height of every row.
So let's say 100 pixels, 200 pixels and 300 pixels.
If we go to the browser and we now look at our grid, let's just zoom out.
We can see the sizes of our grids.
And again, it's very useful.
We can take our h2's, copy the entire block again, save it, go to our browser and there we go.
This is how it works.
Very, very useful.
So with this said, my dear students, I think we're now ready to start coding our cool form example.
Go grab a coffee, go get a Red Bull,
whatever motivates you, and I'll see you in the next lecture.