Блог

Главная - Вопросы по программированию - Сетка CSS Tailwind дает 3 строки вместо 3 двоеточий, но работает только с сеткой-двоеточие-6

Сетка CSS Tailwind дает 3 строки вместо 3 двоеточий, но работает только с сеткой-двоеточие-6

#css #grid #tailwind-css

Вопрос:

Я хотел, чтобы внутри него была 1 строка и 3 столбца. Таким образом, я создал 3 div внутри grid div, который имеет класс «grid-cols-3», но вместо этого я получил 3 raw и 1 столбец.

 <div class="grid grid-cols-3">
    <div> Col 1 </div>
    <div> Col 2 </div>
    <div> Col 3 </div>
</div>

Затем я получил

сетка-col-3

Но когда я изменил «grid-col-3» на «grid-col-6», это сработало!

     <div class="grid grid-cols-6">
      <div> Col 1 </div>
      <div> Col 2 </div>
      <div> Col 3 </div>
   </div>

Затем я получил
сетка-кольцевая-6

Я самоучка, и у меня нет великих наставников. Я знаю, как это сделать, используя CSS, например «шаблон сетки», но я использую tailwind для более быстрого развертывания с Laravel и Livewire.

Комментарии:

1. Ваш первый пример отлично работает в игре с попутным ветром, так что с вашим макетом происходит что-то еще play.tailwindcss.com/lNVMhy4i6Y

Ответ №1:

Если вы протестируете свой код в игре Tailwind, вы заметите, что он работает нормально (как и ожидалось), поэтому могут быть некоторые CSS, которые переопределяют этот класс: grid-cols-3 . Вам следует это проверить.

Однако у меня была аналогичная проблема с Laravel Livewire, я проверил встроенные файлы css и заметил, что определен этот класс: .md:grid-cols-3 так что в моем случае это сработало:

 <div class="grid md:grid-cols-3">
    <div> Col 1 </div>
    <div> Col 2 </div>
    <div> Col 3 </div>
</div>

Комментарии:

1. Спасибо, Густаво, я заметил, что попутный ветер неправильно загружался в Livewire. Я переустановил tailwind, и теперь он работает!

Метки: ,