如何在网格列中设置textarea-element的样式?

时间:2019-04-07 06:07:40

标签: css reactjs css3 css-grid styled-components

我正在对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道具但没有给出解决方案)

1 个答案:

答案 0 :(得分:2)

我为您创建了一个原始CSS表示反应代码-以下是一些指针:

  • justify-items: start会将内容对齐到网格项中-考虑将其删除(还有width: 200%等,我想您也在尝试解决它,将{{ 1}})

  • 现在将justify-itemsinputselect的宽度设置为使用textarea

    填充网格单元格
  • width: 100%无效,因为您在grid-row: row 2定义中没有named grid-line-将其更改为grid-template-rows

  • 您尚未为网格容器定义高度-因此您可以将grid-row: 2更改为grid-template-rows

  • 还请注意使用grid-template-rows: auto autogrid-gap来调整网格项之间的空格

    < / li>

请参见下面的演示

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 */
}