将网格项与容器的角对齐

Question

我想使用CSS Grid对齐项目以使其粘贴到容器框的所有4个角。

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

我有以下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>

Answer 1

.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>

jsFiddle

Answer 2

两种解决方案：

(1) 使用 position: absolute;

• 将您的父容器设置为 position: relative;

• 使用position: absolute;这 4 个 div 框然后用左、上、右、下控制位置

下面的例子：

.container {
  width: 500px;
  height: 300px;
  background: lightgreen;
  position: relative;
  padding: 50px;
}

.container div {
  background: aqua;
  height: 50px;
  width: 50px;
  border: 2px solid black;
  box-sizing: border-box;
  position: absolute;
}

.box1 {
  top: 0;
  left: 0;
}

.box2 {
  top: 0;
  right: 0;
}

.box3 {
  bottom: 0;
  left: 0;
}

.box4 {
  bottom: 0;
  right: 0;
}

<div class="container">
  <div class="box1">Box1</div>
  <div class="box2">Box2</div>
  <div class="box3">Box3</div>
  <div class="box4">Box4</div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
  galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
  containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

(2)使用CSS网格

.container {
  width: 500px;
  height: 300px;
  background: lightgreen;
  display: grid;
  grid-template-columns: 40px auto 40px;
  grid-template-rows: 40px auto 40px;
  padding: 0;
}

.container div {
  box-sizing: border-box;
  border: 1px solid red;
}

.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.box2 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.box3 {
  grid-column-start: 1;
  grid-row-start: 3;
}

.box4 {
  grid-column-start: 3;
  grid-row-start: 3;
}

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