如何在CSS网格的单元格中对齐元素？ [英] How to align elements in cells of a css grid?

问题描述

< pre class = snippet-code-css lang-css prettyprint-override> body {margin：0 auto;最大宽度：60％；}文本区域，输入，选择{宽度：100％; / *扩展网格项目的宽度* / box-sizing：border-box; / *包括填充/宽度边框* /}。wrapper {display：grid; grid-template-columns：1fr 1fr 1fr 30px; grid-template-rows：自动自动; / *更改* /边框：实线1px＃000000; grid-gap：10px; / *网格间隙，以在需要时处理项目之间的空间* /填充：5px； / *包装器和网格项目之间的空间* /}。column1 {grid-column：1/2;}。column2 {grid-column：2/3;}。column3 {grid-column：3/4;}。column4 { grid-column：4/5;}。colspan2 {grid-column：2/4;网格行：2;}

 < div class = 包装器>< div class = column2>标头1< / div> < div class = column3>标头2< / div>< / div>< div class = wrapper> < div class = column1> <选择> < option> een< / option> < option> twee< / option> < / select> < / div> < div class = column2> <输入type = text value = col2 /> < / div> < div class = column3> <输入type = text value = col3 /> < / div> < div class = column4>（i）< / div> < div class = colspan2> < textarea>此处您好评论< / textarea> < / div>< / div>  

我有一个css网格布局，只想将我的标题元素对齐到右侧。我试过-> justify-items：end，但这塞满了整个网格。我如何才能对齐第2列和第3列中的标题项？

解决方案

您可以简单地考虑 text -align：right

  body {margin： 0自动；最大宽度：60％；}文本区域，输入，选择{宽度：100％; / *扩展网格项目的宽度* / box-sizing：border-box; / *包括填充/宽度边框* /}。wrapper {display：grid; grid-template-columns：1fr 1fr 1fr 30px; grid-template-rows：自动自动; / *更改* /边框：实线1px＃000000; grid-gap：10px; / *网格间隙，以处理项目之间的空间（如果需要）* /填充：5px； / *包装器和网格项目之间的空间* /}。column1 {grid-column：1/2;}。column2 {grid-column：2/3; text-align：right;}。column3 {grid-column：3/4; text-align：right;}。column4 {grid-column：4/5;}。colspan2 {grid-column：2/4;网格行：2;}  

 < div class = 包装器>< div class = column2>标头1< / div> < div class = column3>标头2< / div>< / div>< div class = wrapper> < div class = column1> <选择> < option> een< / option> < option> twee< / option> < / select> < / div> < div class = column2> <输入type = text value = col2 /> < / div> < div class = column3> <输入type = text value = col3 /> < / div> < div class = column4>（i）< / div> < div class = colspan2> < textarea>此处您好评论< / textarea> < / div>< / div>  

body {
  margin: 0 auto;
  max-width: 60%;
}

textarea, input, select {
  width: 100%; /* extend the width of the grid item */
  box-sizing: border-box; /* including padding / border in width */
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 30px;
  grid-template-rows: auto auto; /* changed */
  border: solid 1px #000000;
  grid-gap: 10px; /* grid gap to handle spaces between items if needed */
  padding: 5px; /* space between wrapper and grid items */
}

.column1 {
  grid-column: 1/2;
}

.column2 {
  grid-column: 2/3;
}

.column3 {
  grid-column: 3/4;
}

.column4 {
  grid-column: 4/5;
}

.colspan2 {
  grid-column: 2/4;
  grid-row: 2;
}

<div class="wrapper">
<div class="column2">
   header 1
  </div>
  <div class="column3">
   header 2
  </div>
</div>
<div class="wrapper">
  <div class="column1">
    <select>
      <option>een</option>
      <option>twee</option>
    </select>
  </div>
  <div class="column2">
    <input type="text" value="col2" />
  </div>
  <div class="column3">
    <input type="text" value="col3" />
  </div>
  <div class="column4">(i)</div>
  <div class="colspan2">
    <textarea>Hello comments here</textarea>
  </div>
</div>

I have a css grid layout and want to align my header elements only to the right. I tried -> justify-items : end , but this stuffs up the whole grid. How can I just align the header items in column 2 and 3?

解决方案

You can simply consider text-align:right

body {
  margin: 0 auto;
  max-width: 60%;
}

textarea, input, select {
  width: 100%; /* extend the width of the grid item */
  box-sizing: border-box; /* including padding / border in width */
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 30px;
  grid-template-rows: auto auto; /* changed */
  border: solid 1px #000000;
  grid-gap: 10px; /* grid gap to handle spaces between items if needed */
  padding: 5px; /* space between wrapper and grid items */
}

.column1 {
  grid-column: 1/2;
}

.column2 {
  grid-column: 2/3;
  text-align:right;
}

.column3 {
  grid-column: 3/4;
  text-align:right;
}

.column4 {
  grid-column: 4/5;
}

.colspan2 {
  grid-column: 2/4;
  grid-row: 2;
}

<div class="wrapper">
<div class="column2">
   header 1
  </div>
  <div class="column3">
   header 2
  </div>
</div>
<div class="wrapper">
  <div class="column1">
    <select>
      <option>een</option>
      <option>twee</option>
    </select>
  </div>
  <div class="column2">
    <input type="text" value="col2" />
  </div>
  <div class="column3">
    <input type="text" value="col3" />
  </div>
  <div class="column4">(i)</div>
  <div class="colspan2">
    <textarea>Hello comments here</textarea>
  </div>
</div>

这篇关于如何在CSS网格的单元格中对齐元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！