将网格项与容器的角对齐

Question

我想使用 CSS Grid 对齐物品以粘在容器盒的所有 4 个角上。

我该怎么做？使用 CSS grid 有意义还是使用 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>

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，伪元素作为 flex 项目似乎存在问题，因此修复将是 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>

将网格项与容器的角对齐

Align grid items to the corners of the container

css

flexbox

css-grid

两种解决方案：

(1) 使用 `position: absolute;`

(2) 使用CSS 网格

jsFiddle

将网格项与容器的角对齐

Align grid items to the corners of the container

css

flexbox

css-grid

两种解决方案：

(1) 使用 position: absolute;

(2) 使用CSS 网格

jsFiddle

(1) 使用 `position: absolute;`