将极端与CSS网格对齐

Question

我正在尝试将这些框的两端对齐（左和右）。我主要使用CSS Grid。

左侧的框已经自然对齐，但是右侧的框与开头对齐。

.Container {
    background-color:yellow;
    display:grid;
    grid-template-columns: auto minmax(373px, 906px) auto;
}

.Div {
    display:grid;
    grid-template-columns: minmax(272px, 372px) minmax(272px, 372px);
    max-width:906px;
    justify-content:center;
    grid-row-gap: 32px;
    background-color:yellow;
    grid-column: 2/3;
}

.Type {
  width:200px;
  height:200px;
  background-color:red;
}

<div class="Container">
  <div class="Div">
    <div class="Type">
    
    </div>
    <div class="Type">
    
    </div>
    <div class="Type">
    
    </div>
    <div class="Type">
    
    </div>
  </div>
</div>

是否可以使用CSS Grid做到这一点？

Answer 1

您可以这样做：

.Container {
    background-color:yellow;
    display:grid;
    grid-template-columns: auto minmax(373px, 906px) auto;
}

.Div {
    display:grid;
    grid-template-columns: repeat(2, max-content);
    width:100%;
    justify-content:space-between;
    grid-row-gap: 32px;
    background-color:yellow;
    grid-column: 2/3;
}

.Type {
  width:200px;
  height:200px;
  background-color:red;
}

<div class="Container">
  <div class="Div">
    <div class="Type">
    
    </div>
    <div class="Type">
    
    </div>
    <div class="Type">
    
    </div>
    <div class="Type">
    
    </div>
  </div>
</div>

Answer 2

.Container {
    background-color:yellow;
    display: flex;
    justify-content: space-between;
}

.Div {
    display:grid;
    grid-template-columns: minmax(272px, 372px) minmax(272px, 372px);
    max-width:906px;
    justify-content:center;
    background-color:yellow;
    grid-column: 2/3;
}

.Type {
  width:200px;
  height:200px;
  background-color:red;
}

.Type:not(:last-child) {
  margin-bottom: 32px;
}

<div class="Container">
  <div class="Div-left">
    <div class="Type">
    
    </div>
    <div class="Type">
    
    </div>
  </div>
  <div class="Div-right">
    <div class="Type">
    
    </div>
    <div class="Type">
    
    </div>
  </div>
</div>

这是您要找的东西吗？如果是这样，那么flexbox非常适合这种对齐方式。

Answer 3

您可以选择每2n个框并重置margin（第一个代码段）或justify-self（第二个代码段）。

一些阅读https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

.Container {
  background-color: yellow;
  display: grid;
  grid-template-columns: auto minmax(373px, 906px) auto;
}

.Div {
  display: grid;
  grid-template-columns: minmax(272px, 372px) minmax(272px, 372px);
  max-width: 906px;
  justify-content: center;
  grid-row-gap: 32px;
  background-color: yellow;
  grid-column: 2/3;
}

.Type {
  width: 200px;
  height: 200px;
  background-color: red;
}

.Type:nth-child(2n) {
  margin-left: auto
}

<div class="Container">
  <div class="Div">
    <div class="Type">

    </div>
    <div class="Type">

    </div>
    <div class="Type">

    </div>
    <div class="Type">

    </div>
  </div>
</div>

.Container {
  background-color: yellow;
  display: grid;
  grid-template-columns: auto minmax(373px, 906px) auto;
}

.Div {
  display: grid;
  grid-template-columns: minmax(272px, 372px) minmax(272px, 372px);
  max-width: 906px;
  justify-content: center;
  grid-row-gap: 32px;
  background-color: yellow;
  grid-column: 2/3;
}

.Type {
  width: 200px;
  height: 200px;
  background-color: red;
}

.Type:nth-child(2n) {
  justify-self: end;
}

<div class="Container">
  <div class="Div">
    <div class="Type">

    </div>
    <div class="Type">

    </div>
    <div class="Type">

    </div>
    <div class="Type">

    </div>
  </div>
</div>