New CSS site layout--grid layout

Grid layout new CSS site layout

The CSS Grid layout consists of two core components, wrapper (parent element) and items (child elements). Wrapper is the actual grid (grid), items is the content within the grid (GRID). Here is an wrapper element with 6 items inside:

<Divclass= "wrapper">    <Div>1</Div>    <Div>2</Div>    <Div>3</Div>    <Div>4</Div>    <Div>5</Div>    <Div>6</Div></Div>

To turn the wrapper element into one grid(网格) , simply display set its properties to grid :

. Wrapper {    display:grid;}

To make it a two-dimensional grid container, we need to define columns and rows. Let's create 3 columns and 2 rows. We will use the grid-template-row and grid-template-column attributes.

. Wrapper {    display:grid;     grid-template-columns:100px 100px 100px;     grid-template-rows:50px 50px;}

As you can see, we grid-template-columns write 3 values so we get 3 columns. We want to get 2 rows, so we grid-template-rows have specified 2 values.

These values determine how wide we want our columns to be (100px), and how high we want the rows to be (50px), and the results are as follows:

The next step is how to place items (child elements) on a grid (grid).  In particular, this is where Grid layout capabilities are manifested, because it makes it very easy to create layouts. We used the same HTML markup as before, and to help us understand better, we added a separate class to each items (child element):

<Divclass= "wrapper">  <Divclass= "Item1">1</Div>  <Divclass= "Item2">2</Div>  <Divclass= "Item3">3</Div>  <Divclass= "Item4">4</Div>  <Divclass= "ITEM5">5</Div>  <Divclass= "Item6">6</Div></Div>

Now, let's create a 3x3 grid (GRID):

{    display: grid;     grid-template-columns: 100px 100px 100px;     grid-template-rows: 100px 100px 100px;}

You will get the following layout:

I don't know if you found out, we only see the 3x2 grid (grid) on the page, and we define a 3x3 grid (GRID). This is because we only have 6 items (child elements) to fill this grid. If we add 3 items (child elements), the last line will be filled.

To locate and adjust the items (child elements) size, we use the grid-column and grid-row properties to set:

{    grid-column-start: 1;     grid-column-end: 4;}

What we're going to do here is we want the item1 to occupy the beginning of the first grid line and end with the fourth grid line. In other words, it will occupy the entire line independently. The following is what is displayed on the screen:

If you don't understand that we set only 3 columns, why are there 4 grid floss? Take a look at the image below and I draw a black column gridline: Note that we are now working with all the rows in the grid.  When we take the first items (child elements) to occupy the first line, it pushes the rest of the items (the child elements) to the next one. Finally, let's give you a simpler way to write the syntax above:

{    grid-column: Quarter;}

To make sure that you understand the concept correctly, we rearrange the other items (child elements).

{    grid-column-start: 1;     grid-column-end: 3;}  {    grid-row-start: 2;     Grid-row-end: 4;}  {    grid-column-start: 2;     Grid-column-end: 4;}

The following are the layout effects on the page:

New CSS site layout--grid layout