时间戳

首页 > 解决方案 > CSS：网格列和网格行不起作用

html - CSS：网格列和网格行不起作用

问题描述

我想创建一个网格，第一列包含多行文本，第二列包含相同数量的输入行。为此，我考虑只做一个原始数 = 文本行数的网格，并设置我需要的列数。

.AllScores{
    display: grid;
    grid-template-columns: 450px 200px auto 50px 50px 50px 50px 50px;
    grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
}

.AllScores_text{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: #289e19 ;
    text-align: right;
}

.AllScores_inputs{
    grid-column: 2;
    grid-row: 1;
    background-color: #199a9e ;
    text-align: left;
}

所以 AllScores 是我的“网格容器”，AllScores_text 只是网格的第一个单元格，AllScores_inputs 是第一行的第二个单元格。

我这样做只是为了尝试一些简单的事情，因为我是 CSS 和 HTML 的新手，但我的问题是 grid-column/row-start/end 不起作用。我也尝试使用 grid-column : 和 grid-row : 但它也不起作用

以后我还需要网格的灵活性：现在我可以只使用一个表格，但稍后我会将一些单元格合并在一起，这就是我尝试使用网格执行此操作的原因。

有HTML：

<div class='AllScores'>
    <form action="{{ actual_age_range }}/Scores_Gathered" method="post">
                {% csrf_token %}
        <div class='AllScores_text'>
            <label for="DM1_Pref_Hand">Score DM1 - Tirelire (Main préférée) : </label>
        </div>
        <div class='AllScores_inputs'>
            <input id="DM1_Pref_Hand" type="text" name='DM1_Pref_Hand' value="{{ DM1_PH }}">
        </div>
    </form>
</div>

无论如何，感谢您的帮助和您的回答^^

标签： htmlcsscss-grid

解决方案

在第一次， grid-column 或 grid-row 它是一个速记。您必须编写列/行的开头和列/行的结尾。例如：

.AllScores_text {
grid-column: 1 /2;
grid-row: 1 / 2;
}

所以 .AllScores_inputs 不起作用，因为它缺少列尾和行尾。

您可以在导航器互联网中检查元素以查看结果。

我希望能帮助你。

推荐阅读