Как реализовать table на основе grid?
Привет, в общем мне нужна табличка но которая была б гридом,
тоесть изменяла количевство столбцов и строк в зависимости от количевства елементов и шинины контецнера и ширины самих елементов
тоже самое по высоте
нужно в итоге
https://jsbin.com/patokutara/1/edit?html,output
<!DOCTYPE html> <html> <head> <style> .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows:100px; grid-gap: 10px; background:red; width: 100%; height: 100%; } .grid__item { display: flex; justify-content: center; align-items: center; background-color: green; } </style> </head> <body> <div class="grid"> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> </div> </body> </html> |
<!DOCTYPE html> <html> <head> <style> .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows:100px; grid-gap: 10px; background:red; width: 100%; height: 100%; } .grid__item { display: flex; justify-content: center; align-items: center; background-color: green; } </style> </head> <body> <div class="grid"> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> </div> </body> </html>
я сделал такое, но мне нужны border как внутренние так и внешние с border-collapse:collapse
как достичь такое? ну или задать цвет для grid gap, реплизовать подобное на floatflex желательно без js если возможно,
сейчас я пытаюсь использовать цвет контейнера и gap вместо border но если елементов не хватает то это выглядит как квадрат а не border
Дополнительно:
Покажите картинку с желаемым результатом.
но мне нужны border как внутренние так и внешние с border-collapse:collapse
Так и рисуйте бордеры.
Контейнеру левый и верхний, элементам правый и нижний.
Или я не поняла в чем сложность?
p.s. слово table тут, похоже, не очень уместно.
Я пробовал реализовать бордер через outline но тогда не могу прикрутить border-radius
https://jsbin.com/jejevafiki/edit?html,output
мне нужны внешний бордер и внутренний
а тут просто бордер на кадом айтеме
А элементам верхний и задвиньте отрицательным margin на высоту бордера.
Или по первому сценарию + дорисуйте контейнеру по низу полоску, например, градиентом
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания таблицы на основе grid вам нужно использовать CSS Grid Layout. CSS Grid позволяет создавать гибкие и респонсивные сетки, что делает его отличным выбором для создания таблиц.
Вот пример кода на HTML и CSS, который покажет, как можно создать таблицу на основе grid:
HTML:
<div class="grid-container"> <div class="grid-item">Cell 1</div> <div class="grid-item">Cell 2</div> <div class="grid-item">Cell 3</div> <div class="grid-item">Cell 4</div> </div>
CSS:
.grid-container { display: grid; grid-template-columns: auto auto auto; /* задаем три колонки */ grid-gap: 10px; /* задаем отступ между ячейками */ } .grid-item { padding: 20px; text-align: center; border: 1px solid black; }
В этом примере у нас есть контейнер с классом "grid-container", который использует свойство grid для создания трех колонок. Затем у нас есть четыре элемента с классом "grid-item", которые представляют собой ячейки таблицы. Мы применяем стили к этим элементам, чтобы они выглядели как ячейки таблицы.
Вы можете настраивать количество колонок, отступы между ячейками и другие параметры, чтобы создать таблицу, которая соответствует вашим потребностям. Кроме того, вы можете использовать CSS Grid для создания более сложных таблиц с объединенными ячейками и т.д.
Надеюсь, этот пример поможет вам реализовать таблицу на основе grid. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.