Подскажите пожалуйста, как можно обратиться к конкретной колонке грида? (чтобы например задать ему бордер) К элементам в сетке обращаемся типа .my_grid > a:nth-child(2), а вот можно ли обратиться к колонке или строке подобным образом?!
Все конечно зависит от условий, иногда можно что-то сделать, иногда нет. Вот пример как можно сделать выделение колонок, но сложность в том, что добавится строка или колонка и все нужно пересчитывать, а css-переменные тут работать не будут, генерировать css правила, можно, но не всем это понравится, хотя если страница генерируется php к примеру или каким-нибудь js фреймворком это решить можно гораздо проще — например инлайн стилями или дата-аттрибутами содержащими номер столбца и номер колонки.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: fit-content;
background: #a2a5a5;
color: black;
}
.wrapper div {
padding: 5px; /* отступы от краев */
}
/* первая колонка в красной рамке */
.wrapper div:nth-child(3n + 1) {
border-width: 0px 3px 0 3px;
border-color: red;
border-style: solid;
background: rgba(255,0,0, .2);
}
/* верхняя ячейка */
.wrapper div:nth-child(1) {
font-weight: bold;
border-width: 3px 3px 0 3px;
}
/* нижняя ячейка */
.wrapper div:nth-child(7) {
border-width: 0 3px 3px 3px;
}
/* вторая колонка в зеленой рамке */
.wrapper div:nth-child(3n + 2) {
border-width: 0px 3px 0 3px;
border-color: green;
border-style: solid;
background: rgba(0,255, 0,.2);
}
/* верхняя ячейка */
.wrapper div:nth-child(2) {
border-width: 3px 3px 0 3px;
font-weight: bold;
}
/* нижняя ячейка */
.wrapper div:nth-child(8) {
border-width: 0 3px 3px 3px;
}
/* третья колонка в голубой рамке */
.wrapper div:nth-child(3n) {
border-width: 0px 3px 0 3px;
border-color: blue;
border-style: solid;
background: rgba(0, 0, 255,.2);
}
/* верхняя ячейка */
.wrapper div:nth-child(3) {
border-width: 3px 3px 0 3px;
font-weight: bold;
}
/* нижняя ячейка */
.wrapper div:nth-child(9) {
border-width: 0 3px 3px 3px;
}<div class="wrapper">
<div>Фамилия</div>
<div>Имя</div>
<div>Отчество</div>
<div>Иванов</div>
<div>Иван</div>
<div>Иваныч</div>
<div>Сидоров</div>
<div>Сидр</div>
<div>Сидорович</div>
</div>