Возможно ли динамическое c количество CSS столбцов сетки с необязательным заголовком или строкой нижнего колонтитула - PullRequest
Новая
       11

Возможно ли динамическое c количество CSS столбцов сетки с необязательным заголовком или строкой нижнего колонтитула

0 голосов
/ 21 марта 2020

С CSS Сетка динамически c Количество столбцов легко. 

.grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

// these .cells layout nicely
<div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

Но как насчет более сложных макетов с верхним или нижним колонтитулом? 

// doesnt work
.grid {
    grid-template-columns: 1fr, repeat(auto-fit, minmax(100px, 1fr)), 1fr;
}

<div class="grid">
    <header></header>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <footer></footer>
</div>

Это кажется невозможным без запуска новой сетки путем обертывания ячеек в контейнере ... Это то, чего я надеюсь избежать, приняв сетку здесь.

Также используя шаблон области не работают, потому что дело в том, что верхний и нижний колонтитулы являются необязательными.

Возможна ли эта динамическая c природа с CSS Grid?

ОБНОВЛЕНИЕ
Это кажется невозможным.
Я использовал JS, чтобы изменить пользовательское свойство CSS для обновления столбцов сетки.

ОТВЕТ
Ручка Paulie_D ничего не решает, а скорее демонстрирует проблему.

Ответ в том, что это невозможно с CSS Grid. На самом деле почти во всех обстоятельствах нам нужно указывать столбцы. Что, к моему более раннему моменту, сводит на нет преимущества использования сетки IMO. 

// HTML
<div class="grid">
    <header></header>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <footer></footer>
</div>

// CSS
.grid {
    grid-template-columns: 1fr 1fr 1fr;
}
header,footer {
    grid-span: 1 / -1;
}

Ответы [ 2 ]

4 голосов
/ 21 марта 2020

Я уверен, что, если я понимаю вашу проблему, позвольте мне увидеть:

Если вы хотите использовать верхний / нижний колонтитул полной ширины и, между ними, сетку из 3 столбцов, просто установите <header> и <footer> grid-column свойство до span 1 / -1. Таким образом, вы явно говорите, что хотите, чтобы они занимали ширину, равную от первого столбца до конца последнего.

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

Это невозможно в случае CSS Сетки.

Сетка CSS будет разделять столбцы в соответствии с правилами (если предусмотрено), иначе будет автоматически распределяться длина / высота, чтобы равномерно распределить во всех столбцах / строках.

Если вы хотите добавить верхний и нижний колонтитулы или некоторые блоки c stati, было бы лучше, если вы перенесете их в другой блок.

И затем в этом другом блоке вы можете создать новую сетку с новыми правилами для верхнего / нижнего колонтитула в соответствии с вашими требованиями.

Возможно ли это без JS?

ДА , нам нужно только CSS, чтобы иметь стиль для сеток.

...