我正在使用与styledcomponents
的反应,让我的头围绕css网格,无法对齐textarea
,无法获得正确的高度(下一行溢出)和宽度(必须与右侧的'col3'对齐):
const Wrapper = styled.div`
display:grid
grid-template-columns: 1fr 1fr 1fr 30px;
grid-template-rows:25% 25% auto;
justify-items: start;
border: solid 1px #000000
`
const ColumnSpan2 = styled.div`
grid-column: 2/4;
grid-row: row 2;
`;
该组件如下所示:
<Wrapper>
<Column1>
<select>
<option>een</option>
<option>twee</option>
</select>
</Column1>
<Column2>
<input type="text" value="col2" />{' '}
</Column2>
<Column3>
<input type="text" value="col3" />{' '}
</Column3>
<Column4>todo iceon </Column4>
<ColumnSpan2>
{' '}
<textarea>Hello comments here</textarea>
</ColumnSpan2>
</Wrapper>
CSS:
body {
margin: 0 auto;
max-width: 60%;
}
textarea{
width: 200%;
height: 100%
}
我怎样才能为textarea
找到合适的样式(我尝试更改grid-template-rows
道具但没有给出解决方案)
我创建了一个你反应代码的vanilla CSS表示 - 这里有一些指针:
justify-items: start
将对齐网格项内的内容 - 考虑删除它(和width: 200%
等我猜你试图解决它保持justify-items
)input
,select
和textarea
的宽度来填充他们的网格单元格使用width: 100%
grid-row: row 2
无效,因为你在named grid-line
定义中没有grid-template-rows
- 将其更改为grid-row: 2
,grid-template-rows
更改为grid-template-rows: auto auto
,grid-gap
和padding
来调整网格项之间的空间。见下面的演示:
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; /* changed */
}
<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>