BFE.devAI解答 - CSS 问题
23. Grid Layout 2

To achieve the desired layout using CSS Grid Layout, you can use the following code:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
}

.item {
  height: 50px;
  background-color: #7aa4f0;
}

Explanation:

• The display: grid property is used to create a CSS Grid container.
• grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) is used to create a dynamic grid where the columns automatically adjust based on the available space. auto-fill property ensures that as many items are placed in a row as possible. minmax(100px, 1fr) property ensures that each column has a minimum of 100px width and the maximum width is set to fill up the remaining space.
• grid-gap: 10px property creates a gap of 10px between all the grid items.
• The .item class is used to style the grid items with a height of 50px and a background color of #7aa4f0.

With these CSS styles applied, the grid items will be laid out in a row, with a minimum width of 100px and a 10px gap between each item. If there is not enough space to fit all the items in a row, the remaining items will automatically wrap to the next row.