display:grid布局设置两端对齐

`display: grid;` 是CSS Grid布局的一种样式属性，用于创建网格容器。如果你想让元素在网格布局中两端对齐，你可以使用 `justify-items` 属性来控制行方向的对齐方式。例如：

.container {
  display: grid;
  justify-items: end; /* 这会让内容在每一行的末尾对齐，等同于 'align-self: flex-end;' */
}

在这个例子中，`.container` 中的所有项目会在它们各自行的右边对齐。如果你想同时在水平和垂直方向都两端对齐，可以分别设置 `justify-content` 和 `align-items`：

.container {
  display: grid;
  justify-content: space-between; /* 水平居中并且留有间隔 */
  align-items: end; /* 垂直对齐在底部 */
}

这里，`justify-content: space-between;` 会使行之间均匀分布空隙，而 `align-items: end;` 则保持了每个单元格都在其行的末尾。

相关问题

justify-content: space-between；没有两端对齐

在使用`justify-content: space-between`布局时，确实无法实现两端对齐的效果。这是因为`justify-content: space-between`会将元素均匀地分布在容器内，使得元素之间的间距相等，但最后一行的元素无法实现左对齐。

如果你想要实现最后一行左对齐的效果，可以考虑以下几种解决方案：

1. 使用`justify-content: flex-start`：将`justify-content`属性设置为`flex-start`，这样所有的元素都会靠左对齐，包括最后一行的元素。但是这样会导致元素之间的间距不均匀。

2. 使用`display: grid`布局：使用`display: grid`布局可以更灵活地控制元素的对齐方式。你可以将容器设置为网格布局，并使用`grid-template-columns`属性来定义每列的宽度。然后，使用`justify-items: start`来实现左对齐。

3. 使用额外的占位元素：在最后一行的元素后面添加一个占位元素，使其占据剩余的空间。这样可以实现左对齐的效果。你可以使用一个空的`<div>`元素或者一个透明的伪元素来作为占位元素。

这些是几种常见的解决方案，你可以根据具体的需求选择适合你的方法。

设计一行，分左中右三部分，对齐方式为两端对齐，每部分分为上下两部分，水平靠左对齐。

在CSS样式设计中，你可以使用Flexbox布局或者Grid布局来创建这样的结构。这里是一个使用Flexbox的例子：

.container {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
}

.left-part,
.middle-part,
.right-part {
  display: flex;
  flex-direction: column; /* 纵向排列 */
}

.left-part,
.right-part {
  align-self: flex-start; /* 水平靠左对齐，上部分 */
}

.middle-part {
  align-self: flex-end; /* 水平靠左对齐，下部分 */
}

然后在HTML中应用这些样式到对应的元素：

<div class="container">
  <div class="left-part">左侧上</div>
  <div class="middle-part">中间</div>
  <div class="right-part">右侧上</div>
  <div class="right-part">右侧下</div>
</div>