How to Target The Last Column in a CSS Grid

How to target a specific column or row in CSS Grid Layout?

Not possible with CSS.

CSS targets HTML elements, attributes and attribute values.

Grid columns and rows have none of these "hooks".

You'll have to target the grid items directly.

You wrote:

For example, say I have a 3 row by 2 column CSS Grid Layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. How would I select all elements from the 2nd column?

grid-container {  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: 1fr 1fr 1fr;  grid-gap: 10px;  padding: 10px;  height: 50vh;  background-color: gray;}
grid-item { background-color: lightgreen;}
grid-item:nth-child(2n) { border: 2px dashed red;}
<grid-container>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item></grid-container>

How to target the last column in a CSS grid?

Such selector exist but we are still far from having a good support for it. You can read:

To be able to represent such implied column-based relationships, the column combinator and the :nth-col() and :nth-last-col() pseudo-classes are defined

For your particular case, a background can do the job:

.grid 
{
display: grid;
grid-template-areas: "d b c a";
grid-template-columns: repeat( 4, 1fr );
background:
linear-gradient(90deg,#0000 calc(100% - 1px), #000 0)
0 50%/calc((100% + 1px)/4) 50% repeat-x
#F4F4F4;
}

.column.a {
grid-area: a;
}

.column.b {
grid-area: b;
}

.column.c {
grid-area: c;
}

.column.d {
grid-area: d;
}

/* Flavor */
.grid
{
margin: 20px auto;
max-width: 600px;
padding: 20px;
}

.column {
width: 100%;
text-align: center;
}
<div class="grid">
<div class="column a">A</div>
<div class="column b">B</div>
<div class="column c">C</div>
<div class="column d">D</div>
</div>

CSS: How to style last grid row of a dynamic number of items?

If you will always have 3 columns keep the template row auto and define the height on the elements. All should have 70px except the first 3 and the last 3 under certain conditions.

.cont {
background: grey;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3px;
margin:10px;
}
.cont div {
background: red;
height:70px;
}

.cont div:nth-child(1), /* 1st */
.cont div:nth-child(2), /* 2nd */
.cont div:nth-child(3), /* 3rd */
.cont div:nth-last-child(1), /* last one */
.cont div:nth-last-child(2):not(:nth-child(3n + 3)), /* before the last if not the last one of a row*/
.cont div:nth-last-child(3):nth-child(3n + 1){ /* before the two last only if the fisrt one of a row*/
height:22px;
}
<div class="cont">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="cont">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="cont">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Target CSS grid column within a single element

In grid layout you can wrap cells in a div using display:contents:

:root {
--col-no: 1;
}

.wrapper {
height: 300px;
width: 100vw;
display: grid;
grid-template-columns: 100px repeat(6, 150px);
grid-auto-flow: column;
overflow: scroll;
}

.section {
background-color: lightgreen;
}

.title {
background-color: orange !important;
}

.col {
/* disply contents */
display: contents;
}

.col:nth-child(2n + 2)>* {
background-color: #ddd;
}

.col:first-child>div {
position: sticky;
left: 0;
}

.col>* {
grid-column: var(--col-no);
}

.footer {
display: contents;
}

.footer>div {
background-color: yellow;
grid-row: 1000;
position: sticky;
bottom: 0;
}

.col:nth-child(1) {
--col-no: 1;
}

.col:nth-child(2) {
--col-no: 2;
}

.col:nth-child(3) {
--col-no: 3;
}

.col:nth-child(4) {
--col-no: 4;
}

.col:nth-child(5) {
--col-no: 5;
}

.col:nth-child(6) {
--col-no: 6;
}
<div class="wrapper">
<div class="col">
<div class="section">
<span>Section title1</span>
</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="section">
<span>Section title2</span>
</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="section">
<span>Section title3</span>
</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
</div>
<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value value value =</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
</div>

<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value abc abc efgh hijk lmin = =</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
</div>

<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value value value value value===</div>
<div class="items">value</div>
<div class="items">value</div>
</div>

<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value value value value value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
</div>

<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value value value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
</div>

<div class="grid footer">
<div class="item title">Foot Key</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
</div>
</div>

CSS columns: target last child in each column?

I think @Vucko has given the answer which points you to the correct direction but it's really not very dynamic. It's applicable only if you know the number of columns and the fixed number of rows. I would like to add this answer providing another workaround to solve your problem. I have to say that it's just a workaround, it does not use any kind of CSS selector because as I said, the solution given by Vucko seems to be the only most direct one.

The idea here is you can just add some pseudo-element to the ul element, make it stick to the bottom and has the same background with the parent ul so that it can hide the bottom lines. It's a pity that it also hides the vertical lines (the column-rule), if that does not really matter, I think you should choose this solution:

ul {
...
position:relative;
}

ul:after {
content:'';
width:100%;
height:34px;
position:absolute;
background-color:inherit;
bottom:0;
left:0;
}

Fiddle for 3 columns. You can change the number of columns without having to change any other.

NOTE: I'm pretty sure that there is no direct solution to your problem (which can select the last item in each column dynamically). Because all the items are laid out as columns but in fact they are just inline items contained by the parent ul.

Make a grid item span to the last row / column in implicit grid

You can add grid-row-start to that boxes css, and set it to span an absurdly high number.

.container {  display: grid;  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;   grid-template-rows: auto [last-line];}
.box { background-color: blue; padding: 20px; border: 1px solid red;}
.box:nth-child(3) { background-color: yellow; grid-column: last-col / span 1; grid-row: 1 / last-line; grid-row-start: span 9000;}
<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box">3</div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>

CSS Grid Margin Top for entire columns

You can use the :nth-child() pseudo class to achieve this. This is how I approached it:

<div class="container">
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>

.container{
max-width: 900px;
margin: 0 auto;
height: auto;
}
.cards{
display: grid;
place-items: center;
grid-template-columns: repeat(4,1fr);
gap: 5px;
}

.card{
width: 200px;
height: 250px;
border: 3px solid black;
}

.card:nth-child(2n-2){
position: relative;
top: 100px;
}
/* or use margin */
/*
.card:nth-child(2n-2){
margin-top: 100px;
}
*/

Here is the codepen link: https://codepen.io/glenhug/pen/QWrWXJY
Also this is post had a nice explanation: How to target a specific column or row in CSS Grid Layout?



Related Topics



Leave a reply



Submit