Grid::右对齐网格项答案

【问题标题】：Grid::Right align grid itemGrid::右对齐网格项
【发布时间】：2018-11-29 05:00:09
【问题描述】：

通过使用右侧按钮的网格定位。谁能指出我正确的方向？

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100px;
}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

在上述场景中，如何将两个按钮移动到父div的末尾？

【问题讨论】：

标签： html css css-grid

【解决方案1】：

问题是..您已将网格宽度设置为 100 像素

而是在网格内设置列width:100px，因为网格是容器也使用justify-content:end;将内容对齐到右侧。

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100%;
  grid-template-columns: 100px 100px;
  justify-content: end;
}
 button{display:inline-block;}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

【讨论】：

似乎 : with grid-template-columns: repeat(10, 1fr); “证明内容：结束”不起作用。我只想获得自动宽度并右对齐，避免硬编码项目的宽度。解决方法是什么？

【解决方案2】：

使用justify-content: end; & grid-template-columns: 100px 100px;

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100%;
  grid-template-columns: 100px 100px;
  justify-content: end;
}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

【讨论】：

【解决方案3】：

希望对你有帮助！

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100px;
  margin: 0 0 0 auto; //added
}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

【讨论】：