Можно ли как-то заполнить пустую ячейку в GRID сетке?

Dmitriy_2014
На сайте с 01.07.2014
Offline
344
570

Всем привет!

Подскажите если кто знает и если это вообще возможно, можно ли как-то искусственно заполнить пустую ячейку, которая формируется, когда нечетное количество ячеек в сетке, ну, например,

У меня 5 ячеек, а разбито по две, через grid-template-columns: 1fr 1fr;, но в конце, на последней строке как бы остается одна ячейка и одна пустая без контента.

Грид верстка

И я знаю что можно либо убрать последнюю, тогда все выровнется, либо сделать ей grid-column: span 2;, тогда она растянется и будет занимать и пустое место, но не хотелось бы скрывать или растягивать последнюю ячейку.

Может можно добавить как-то через after какой-нибудь контент туда, что бы не было пустоты и как-то стильно оформить.

Заранее всем спасибо за ответы!


Сергей про е-ком
На сайте с 11.05.2008
Offline
310
#1
Dmitriy_2014 :

Всем привет!

Подскажите если кто знает и если это вообще возможно, можно ли как-то искусственно заполнить пустую ячейку, которая формируется, когда нечетное количество ячеек в сетке, ну, например,

У меня 5 ячеек, а разбито по две, через grid-template-columns: 1fr 1fr;, но в конце, на последней строке как бы остается одна ячейка и одна пустая без контента.


И я знаю что можно либо убрать последнюю, тогда все выровнется, либо сделать ей grid-column: span 2;, тогда она растянется и будет занимать и пустое место, но не хотелось бы скрывать или растягивать последнюю ячейку.

Может можно добавить как-то через after какой-нибудь контент туда, что бы не было пустоты и как-то стильно оформить.

Заранее всем спасибо за ответы!


Есть же нормальные fluid решения с шириной. Не используй мусорные темы. )

P.S: Не надо ничем заполнять.

Крутейшая тема и конструктор на WP - https://shop.greenshiftwp.com/?from=3338
Сергей про е-ком
На сайте с 11.05.2008
Offline
310
#2
Вариант 2, сделай правило, что если в модели, где нечётно, последний *2 ширина. Но тема похожа на троллинг пятничный.
Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#3
Сергей про е-ком #:
Вариант 2, сделай правило, что если в модели, где нечётно, последний *2 ширина. Но тема похожа на троллинг пятничный.
Да не, про вытягивания ячейки на две через grid-column: span 2;, это я знаю, как бы по другому что-то сделать, чтобы эту дырку закрыть, но не скрывать и не растягивать.
E
На сайте с 01.10.2017
Offline
121
#4
Dmitriy_2014 #:
как бы по другому что-то сделать, чтобы эту дырку закрыть, но не скрывать и не растягивать.

Цветочек нарисуй или Z-ку для более строгих сайтов.

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

Домены на продажу: https://p20.ru/collection/domains-for-sale
Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#5
Короче посмотрел у официального блога Roblox - https://corp.roblox.com/newsroom, сетку grid’а, и у них примерно как у меня, и если посмотреть когда сжимается и если в две колонки сетка переходит, то тоже последняя ячейка пустая, т.к. 9 на 2 не делится, и никак не оформлена или стилизована, так что смысла в этом нет, если уж чуваки с мульти миллиардным(бесконечным) бюджетом не заморачиваются, то что уж тут спрашивать.
Artisan
На сайте с 04.03.2005
Offline
379
#6
Dmitriy_2014 #:
если уж чуваки с мульти миллиардным бюджетом не заморачиваются.

Они могут себе позволить не заморачиваться.

Quod licet Iovi, non licet bovi.

Что игумену можно, то братии зась.

Што можна ваяводзе, то не табе, смуродзе.

www.leak.info / ДАРОМ линки конкурентов и забытых доменов
Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#7
Artisan #:

Они могут себе позволить не заморачиваться.

Quod licet Iovi, non licet bovi.

Что игумену можно, то братии зась.

Што можна ваяводзе, то не табе, смуродзе.

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий