将网格项与容器的角对齐 [英] Align grid items to the corners of the container

问题描述

我想使用 CSS网格对齐要粘贴的项目到容器盒的所有四个角。

I want to use CSS Grid to align the items to stick to all 4 corners of the container box.

我该怎么做？使用CSS网格有意义还是使用弹性框更好？

How would I do this? Does it make sense to use CSS grid or is it better to use flex box?

我有以下HTML：

 <div class="container">
    <div class="box1">Box1</div>
    <div class="box2">Box2</div>
    <div class="box3">Box3</div>
    <div class="box4">Box4</div>
 </div>

推荐答案

.container {
  display: grid;
  grid-template-columns: auto auto;  /* grid has two columns; content defines width */
  justify-content: space-between;    /* horizontal alignment of grid tracks */
  align-content: space-between;      /* vertical alignment of grid tracks */
  height: 300px;
  background-color: lightgray;
  border: 1px solid black;
}

.container > div {
  background-color: yellow;
}

<div class="container">
  <div class="box1">Box1</div>
  <div class="box2">Box2</div>
  <div class="box3">Box3</div>
  <div class="box4">Box4</div>
</div>

这篇关于将网格项与容器的角对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！