Как сделать так, чтобы панель Grid была не выше, чем нужно для ее содержимого? - PullRequest
Новая
       5

Как сделать так, чтобы панель Grid была не выше, чем нужно для ее содержимого?

0 голосов
/ 21 февраля 2020

Я пытаюсь создать макет из двух столбцов, используя CSS Сетка.

У меня есть 

.left_1 {
    grid-column: 1;
    grid-row: 1;
}
.left_2 {
    grid-column: 1;
    grid-row: 2;
}
...

.right_1 {
    grid-column: 2;
    grid-row: 1;
}
.right_2 {
    grid-column: 2;
    grid-row: 2;
}

...

и так далее. Два верхних элемента сетки содержат только теги заголовков для заголовков, которые помечают каждый столбец: 

<div class="left_1"><h4>Left Header</h4></div>
....
<div class="right_1"><h4>Right Header</h4></div>

Эти панели сетки оказываются намного выше, чем они должны быть, так что заголовки (вертикально выровненные по центру) плавать над остальными столбцами, чтобы не сразу было понятно, что они должны быть надписями для этих столбцов. Я покрасил фон элемента <h4>, чтобы подтвердить, что это нормальный размер: достаточно высокий, чтобы вместить текст заголовков. Именно сам макет Grid делает панели слишком большими.

Я пытался добавить grid-template-rows: fit-content(); (различные проценты), grid-template-rows: auto;, height: auto;, height: 100%;, height: fit-content; и display: inline-block; к дескрипторам классов для left_1 и right_1, но ничего не меняет высоту панелей Grid.

Как сделать панели Grid не более высокими, чем это необходимо для содержания их содержимого? Я хотел бы избежать жесткого кодирования точного количества пикселей.

Редактировать: Вот полный файл, который показывает проблему: 

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">

        <style>
            .columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 10px;
            }

            .left_1 {
            grid-column: 1;
            grid-row: 1;
            }
            .left_2 {
            grid-column: 1;
            grid-row: 2;
            }

            .right_1 {
            grid-column: 2;
            grid-row: 1;
            }
            .right_2 {
            grid-column: 2;
            grid-row: 2;
            }

            h4 {
            background-color: yellow;
            }
        </style>

    </head>

    <body>
        <form>
            <div class="columns">
                <div class="left_1"><h4>Left Header</h4></div>
                <select class="left_2" multiple="yes">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>

                <div class="right_1"><h4>Right Header</h4></div>
                <select class="right_2" multiple="yes">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>
            </div>
        </form>
    </body>
</html>

Ответы [ 2 ]

1 голос
/ 21 февраля 2020

Это хак, но поскольку все, что вам нужно, это четко показать, что заголовки являются метками для столбцов.
просто добавьте:
margin-bottom: 0;
к вашему блоку h4 в CSS файл.

Таким образом, вместо того, чтобы существовать, замените его на следующий: 

h4 {
  background-color: yellow;
  margin-bottom: 0;
}
0 голосов
/ 21 февраля 2020

Попробуйте это: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        .columns {
            display: grid;
            grid-template-columns: auto auto;
            row-gap: 0;
            /*grid-template-rows: min-content min-content;*/
            column-gap: 10px;
            justify-content: center;
        }
        .left_1 {
            grid-column: 1;
            grid-row: 1;
        }
        .left_2 {
            grid-column: 1;
            grid-row: 2;
        }
        .right_1 {
            grid-column: 2;
            grid-row: 1;
        }
        .right_2 {
            grid-column: 2;
            grid-row: 2;
        }
        select {
            display: grid;
            grid-template-columns: min-content;
        }
        h4 {
            background-color: yellow;
            margin: 0;
        }
    </style>
</head>
<body>
<div class="my_class">
    <div class="columns">
        <div class="left_1"><h4>Left Header</h4></div>
        <div class="left_2">
            <select class="" multiple="yes">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
            </select>
        </div>
        <div class="right_1"><h4>Right Header</h4></div>
        <div class="right_2">
            <select class="" multiple="yes">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
            </select>
        </div>
    </div>
</div>
</body>
</html>
...