Initial Grid layout 🐱 (2)

First introduction to grid layout 🐱 (1)

    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
    </div>
    <style>
        .item{
            border: 5px solid rgba(0, 0, 0, 0.03); 
            border-radius: 3px;
            font-size: 35px;
            background-color: #ffc600;
        }		 
    </style>
Copy the code

Placing a single item based on a dividing line

Grid-column-start and grid-column-end are set to items, not containers. These two properties specify the value of the dividing line.

The value of the dividing line

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.item1{
    grid-column-start: 2;
    grid-column-end:3;
}
Copy the code

grid-column-start
grid-column-end
grid-column
grid-column: 1 / -1

span

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.item1{
    grid-column-start: 2;
    grid-column-end: span 2;
}
Copy the code

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.item1{
    grid-column-start: span 2;
}
Copy the code

According to the specification, I think it would be like for example the first item is 1,2, but because it starts with span 2, it starts at 3, and then it ends at 2, and according to the specification, it swaps.

If the placement for a grid item contains two lines, and the start line is further end-ward than the end line, swap the two lines. If the start line is equal to the end line, remove the end line.

Create row and column populations automatically

Auto-fit and auto-fill can be used to dynamically create grid-template-columns without knowing the width of the container. grid-template-columns: repeat(auto-fit, 150px); Regardless of the gap, two columns will be created when the container is only 300px wide and three columns will be created when the container is 450px wide.

The two difference can refer to Auto – Sizing the Columns in the CSS Grid: Auto – the fill vs Auto – fit | CSS Tricks

Area (area)

  <div class="container">
    <div class="item item1">
      <p>I'm Sidebar #1</p>
    </div>
    <div class="item item2">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
      <p>Lorem ipsum d</p>
    </div>
    <div class="item item3">
      <p>I'm Sidebar #2</p>
    </div>
    <div class="item footer">
      <p>I'm the footer</p>
    </div>
  </div>
  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 1fr 10fr 1fr;
      grid-template-rows: 150px 150px 100px;
      grid-template-areas:
        "sidebar-1 content sidebar-2"
        "sidebar-1 content sidebar-2"
        "footer footer ."
    }
    .footer {
      grid-area: footer;
    }
    .item1 {
      grid-area: sidebar-1;
    }
    .item2 {
      grid-area: content;
    }
    .item3 {
      grid-area: sidebar-2;
    }
  </style>
Copy the code

grid-template-areas
grid-area

In the middle

justify-items and align-items

.container{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    justify-items: center;
    align-items: center;
    grid-gap: 20px;
}
Copy the code

justify-items
align-items
align-items
place-items

justify-content and align-content

.container{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    height: 400px;
    justify-content: center;
    align-content: center;
    grid-gap: 20px;
}
Copy the code

align-self and justify-self

Both justify-items and align-items apply to all items, and this allows you to set the arrangement of individual items.

.container{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    justify-items: center;
    align-items: center;
    grid-gap: 20px;
}
.item1{
    justify-self: start;
    align-self: start;
}
Copy the code

Refer to the link

A Complete Guide to Grid | CSS-Tricks