Learn Grid Layout from Scratch — The sequel

This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Grid clearance and abbreviation

• Grid-row-gap grid-column-gap Grid-gap: set the gap between columns and columns of an element. Row -gap column-gap gap is recommended

  Set the line spacing to 20px

  .main {
      grid-row-gap: 20px;
  }
  Copy the code

  

  Set the column spacing to 30px

  .main {
      grid-column-gap: 30px;
  }
  Copy the code

  

  Use the compound style to set the column 20px 30px

  .main {
      grid-gap: 20px 30px;
  }
  Copy the code

  

  The above three attributes are still available, but have been deprecated. Use row-gap column-gap gap instead

  .main {
      row-gap: 20px;
      column-gap: 30px;
      /* gap: 20px 30px; * /
  }
  Copy the code

Grid alignment and abbreviation

• justify-items align-items place-itemsDefault value:stretch, specifying the alignment of subitems in the grid; Optional value:start | end | center | stretch

<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
Copy the code

.main {
    width: 300px;
    height: 300px;
    background: skyblue;
    display: grid;
    grid-template: 100px 100px 100px
               / 100px 100px 100px;
}
.main div {
    width: 50px;
    height: 50px;
    text-align: center;
    border: 1px dashed #f2f2f2;
    background: pink;
}
Copy the code

The grid size is still 100X100

.main {
    justify-items: center;
    align-items: center;
    place-items: center center; /* compound */
}
Copy the code

The cell is now centered horizontally and vertically

• justify-content align-content place-contentDefault value:stretchSpecify the horizontal and vertical positions of the entire content area within the container. Optional value:start | end | center | stretch | space-around | space-between | space-evenly

The container is centered inside

.main {
    width: 500px;
    height: 500px;
    justify-content: center;
    align-content: center;
}
.main div {
    width: 100px;
    height: 100px;
}
Copy the code

Items are equally spaced from item to item, as are items from container borders

.main {
    justify-content: space-evenly;
    align-content: space-evenly;
}
Copy the code

Merge abbreviations

.main {
    place-content: center space-evenly;
}
Copy the code