Внутренняя сетка блоков, которая только внутри, делим красиво блоки, как реализовывать правильно?

Question

[Антон Вебсайтовский]

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

отменяю где не надо показывать бордер
.catt > a:nth-child(10),
.catt > a:nth-child(6),
.catt > a:nth-child(7),
.catt > a:nth-child(8),
.catt > a:nth-child(9) {
	border-bottom: none;
}

Речь об этом:


Реализовал я это так, код тут:
https://codepen.io/AXOT/pen/OPLNRdp

Comments

[Ankhena]

может быть есть более удобный

Очевидно, что более удобно не рисовать верхним. И уж точно в один nth-child.
И во второй nth-child - левым.

И этим -ms-flex и аналогами перестаньте позориться.

[Антон Вебсайтовский]

Ankhena, да все полностью на грид не могу перейти ), не часто уже занимаюсь сайтами.

[Ankhena]

Антон Вебсайтовский, я не про грид, а про префиксы в исходниках. Тем более для флексов и ие.

[Антон Вебсайтовский]

Вот так можно реализовать, на грид
https://codepen.io/AXOT/pen/dPbMOGG

Но опять же, там эти

.block:not(:nth-last-child(-n+4)) {
    border-bottom: 1px solid #ccc;
}

Я думал, что может как-то по другому можно ) но видимо еще нет такого свойства, чтоб не писать last-child и т.д

[Антон Вебсайтовский]

Ankhena, а понял )) щас нет необходимости и браузера все понимают уже)

[Ankhena]

Антон Вебсайтовский,

Вот так можно реализовать, на грид

Да, так лучше. Но все равно логичнее верхние и левые.

Я думал, что может как-то по другому можно

Можно рисовать всем и задвинуть за родителя. Либо тенями вместо сдвига, ещё проще.

Можно задать фон родителю и gap.

[Антон Вебсайтовский]

Ankhena, приведи примеры наглядные, проще понять будет, раз можно по лучше сделать.

[Ankhena]

Антон Вебсайтовский, с фоном по мотивам https://sitist.ru/gradient-border.html
С тенями или margin, думаю, разберетесь самостоятельно.

[Ankhena]

Антон Вебсайтовский,

приведи примеры

Мы с вами на ты не переходили и будьте добры не переходить.

[Антон Вебсайтовский]

Сделал по примеру как по ссылке, ну не плохо так, много конечно манипуляций
https://codepen.io/AXOT/pen/OPLNRdp

----
Я пытался что-то такое сделать, бордер присвоить всем элементам, но снизу, родительский див как-то поднять выше на 1px, чтобы он был белым цветом и скрыл у нижних блоков бордер. Но так чтобы поверх был белый этот фон у родительского дива, по идеи его поверх надо делать, уже не состыковка. Ну или просто снизу добавить див поднять на 1px, и сделать поверх и так можно скрывать, но уже как костыль ), хотя и вариант последний, он тож как костыль ) через махинации.

Оставлю значит последний вариант.

[Антон Вебсайтовский]

Ankhena, как теперь отметить решением )

[Ankhena]

Антон Вебсайтовский, в данном случаи проще удалить вопрос, потому что он банален.

[Антон Вебсайтовский]

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

[Ankhena]

Антон Вебсайтовский, верите в то, что кто-то с аналогичными сложностями наберет в поиске текст как в вашем вопросе?
Если хочется, чтобы вопрос принес кому-то ещё пользу, то нужно его нормально переформулировать.

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

Из верстки тут знание nth-child и has. Остальное - простенькая логика с геометрией. Или уровень поделок в детском саду: как сделать окошки в домике, вырезать или наклеить поверх.

Но дело ваше, конечно.