Что означает `span 1 / span 1` в сетке CSS? - PullRequest
Новая
       10

Что означает `span 1 / span 1` в сетке CSS?

3 голосов
/ 14 февраля 2020

Я использую новую сетку Tailwind CSS. Он имеет Столбец сетки со значениями span 1/span 1 для класса col-span-1, span 2/ span 2 для класса col-span-2 и так далее до span 12/span 12 для класса col-span-12.

Я являюсь однако не может понять span 1/ span 1 на практике. Я могу понять 1 / span 1. Я также могу понять span 1/ 3, но не могу, кажется, gr asp span 1/ span 1.

1 Ответ

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

Задавая вопрос, я возился со следующим CodePen и, похоже, нашел решение. 

<div class="grid grid-cols-3 gap-3 bg-gray-300">
    <div class="bg-green-500 text-white text-6xl flex items-center justify-center border-8 border-black col-span-1">1</div>
    <div class="bg-indigo-500 text-white text-6xl flex items-center justify-center border-8 border-black">2</div>
    <div class="bg-red-500 text-white text-6xl flex items-center justify-center border-8 border-black">3</div>
    <div class="bg-yellow-500 text-white text-6xl flex items-center justify-center border-8 border-black">4</div>
</div>

В приведенном выше HTML предполагается, что у вас связан Tailwind CSS. Он показывает следующий вывод -

Col Span 1

Обратите внимание, col-span-1 in 1. col-span-1 относится к span 1 / span 1.

Теперь давайте изменим код на следующий: 

<div class="grid grid-cols-3 gap-3 bg-gray-300">
    <div class="bg-green-500 text-white text-6xl flex items-center justify-center border-8 border-black col-span-2">1</div>
    <div class="bg-indigo-500 text-white text-6xl flex items-center justify-center border-8 border-black">2</div>
    <div class="bg-red-500 text-white text-6xl flex items-center justify-center border-8 border-black">3</div>
    <div class="bg-yellow-500 text-white text-6xl flex items-center justify-center border-8 border-black">4</div>
</div>

1 содержит col-span-2, что составляет span 2 / span 2. Он также покрывает пространство 2.

Вывод выглядит следующим образом:

Col Span 2

Если поставить col-span-4 в 1, это не сработает, так как мы определили Grid для столбца 3 в родительском div с grid-cols-3. Кроме этого, span охватывает пространство, откуда он начинается.

...