我正在对styledcomponents
进行反应,将自己的头转向css-grid,无法对齐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
道具但没有给出解决方案)
答案 0 :(得分:2)
我为您创建了一个原始CSS表示反应代码-以下是一些指针:
justify-items: start
会将内容内对齐到网格项中-考虑将其删除(还有width: 200%
等,我想您也在尝试解决它,将{{ 1}})
现在将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 */
}