CSS Gridlayout Child не придерживается grid-шаблона - PullRequest
Новая
       10

CSS Gridlayout Child не придерживается grid-шаблона

0 голосов
/ 05 апреля 2020

Я пытаюсь создать страницу ввода данных, используя CSS gridlayout, где сетка content-section имеет верхнюю секцию, содержащую входные данные, и нижнюю секцию, содержащую результаты данных уже в базе данных. Верхняя часть разделена на два столбца сетки. Но когда я добавляю свои входные данные, верхняя часть не соответствует значениям grid-template-columns или grid-template-rows.

Я добавил цветную рамку к каждой из сеток, чтобы увидеть, какие сетки не соответствуют CSS атрибуты класса. Как ясно видно из моего фрагмента кода, section-top (желтая граница) и его col1 (зеленая граница) вместе с col2 (зеленая граница) дочерние элементы не соответствуют заданным атрибутам.
Значение section-top должно составлять только 40%, его родительский элемент content-section (красная граница) и дочерние элементы col1 вместе с col2 должны отображаться в виде двух столбцов одинакового размера в верхней части. 

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    background-color: #3399FF;
    font-size: 1rem;
    font-weight: 400;
    color: #858796;
}
.main-grid-data-section {
    display: grid;
    grid-template-columns: 1fr 80% 1fr;
    grid-template-rows: auto auto auto 85% auto;
    grid-template-areas: 
    "title title title"
    "smaller-header smaller-header smaller-header"
    "sidebar sidebar sidebar"
    ". content-section ."
    "footer footer footer";
    grid-gap: 1px;
    height: calc(100vh - 100px);
}
.smaller-header {
    grid-area: smaller-header;
}
.content-section {
    grid-area: content-section;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40% auto;
    grid-template-areas: 
    "section-top"
    "section-bottom";
    border-style: solid;
    border-color: rgb(255, 51, 51);
}
.section-top {
    grid-area: section-top;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "col1 col2";
    align-self: start;
    margin: 0;
    padding: 0;
    border-style: solid;
    border-color: rgb(252, 255, 51);
}

.section-bottom {
	grid-area: section-bottom;
	margin: 0;
	padding: 2px;
	border-style: solid;
	border-color: rgb(255, 160, 51);
}
.col1 {
	grid-area: col1;
	margin: 0;
	padding: 0;
	border-style: solid;
	border-color: rgb(58, 255, 51);
}
.col2 {
	grid-area: col2;
	margin: 0;
	padding: 0;
	border-style: solid;
	border-color: rgb(58, 255, 51);
}
.footer {
    grid-area: footer;
    display: grid;
    grid-template-columns: 1fr 30% 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "login-footer-grid login-footer-grid login-footer-grid"
}
<!DOCTYPE html>
<html lang="en">
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="./css/test.css">
    </head>
<body>
<!-- Main grid layout -->
<div class="main-grid-data-section">
    <div class="title">
    </div>
    <div class="smaller-header">
    </div>
    <div class="sidebar">
    </div>
    <!-- Content data grid -->
    <div class="content-section">
        <!-- Data input section -->
        <div class="section-top">
            <form id="grading" class="form-container">
                <div class="col1">
                    <input type="text" placeholder="Document number" id="docnumber" name="docnumber">
                    <input type="number" placeholder="Bruto waarde" id="gross" name="gross">
                    <input type="number" placeholder="Bin hoeveelheid" id="cnt" name="cnt">
                    <input type="number" placeholder="Bin gewig" id="bin" name="bin">
                </div>
                <div class="col2">
                    <input type="number" id="cj" name="cj">
                    <input type="number" id="cb" name="cb">
                    <input type="number" id="cm" name="cm">
                    <input type="number" id="sj" name="sj">
                    <input type="number" id="sb" name="sb">
                    <input type="number" id="sm" name="sm">
                    <input type="number" id="ind" name="ind">
                    <input type="number" id="nv" name="nv">
                    <input type="number" id="moist" name="moist">
                </div>
            </form>
        </div>
        <!-- Data show section -->
        <div class="section-bottom">
            <div></div>
        </div>
    </div>
    <div class="footer">
        <!--Footer-->
    </div>
</div>
</body>
</html>
Я попытался удалить атрибут дочерних областей шаблона и установить столбцы только как столбцы шаблонов, это не сработало.
Может кто-нибудь указать мне, какой атрибут или свойство вызывает эту проблему?

1 Ответ

1 голос
/ 05 апреля 2020

В своем вопросе вы говорите:

Как ясно видно из моего фрагмента кода, верхняя часть раздела (желтая граница) и ее столбец col1 (зеленая граница) вместе с дочерними элементами col2 (зеленая граница) не следует заданным атрибутам.

Но col1 и col2 не являются дочерними элементами раздела top, они являются его внуками.

Вы можете установить стиль, который вы применяете к вершине раздела, к градации формы, и тогда стили сетки будут работать

...