将网格项目与容器的角对齐

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

两种解决方案：

(1) 使用position: absolute;

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

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

下面的例子：

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

Answer 2

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

也可以使用 Flexbox 执行此操作，使用伪将第 3 和第 4 项推送到新行。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  align-items: flex-start;
  height: 200px;
  background-color: lightgray;
  border: 1px solid black;
}

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

.container > div:nth-child(n+3) {
  order: 2;
  align-self: flex-end;
}

.container::before {
  content: '';
  order: 1;
  flex-basis: 100%;
}

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

---

根据评论更新。

对于 Windows 7 上的 IE11，它似乎存在将伪作为弹性项目的问题，因此解决此问题的方法是 spacer 元素。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  align-items: flex-start;
  height: 200px;
  background-color: lightgray;
  border: 1px solid black;
}

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

.container > div:nth-child(n+3) {
  order: 2;
  align-self: flex-end;
}

.container .spacer {
  flex-basis: 100%;
}

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