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

Question

Is it possible to select a specific grid column or row with CSS?

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? For example: grid:nth-child(column:2) (just my idea, not valid code).

I have tried nth-child selectors on the div elements, but this does not allow me to specify row or column when the items are automatically placed by the Grid Layout engine.

body {    display: grid;    grid-template-rows: 1fr 1fr 1fr;    grid-template-columns: 1fr 1fr;    grid-gap: 10px;  }    .item {    background: #999;  }

<div class="item">    <p>Customer Name</p>    <p>Element 1 | Element 2</p>  </div>    <div class="item">    <p>Right Justify</p>    <p>Element 1 | Element 2</p>  </div>    <div class="item">    <p>Customer Name</p>    <p>Element 1 | Element 2</p>  </div>    <div class="item">    <p>Customer Name</p>    <p>Element 1 | Element 2</p>  </div>  <div class="item">    <p>Customer Name</p>    <p>Element 1 | Element 2</p>  </div>  <div class="item">    <p>Customer Name</p>    <p>Element 1 | Element 2</p>  </div>  <div class="item">    <p>Customer Name</p>    <p>Element 1 | Element 2</p>  </div>

Answer 1

To style an arbitrary row, you could use a wrapper element with its display set to contents. See the code snippet below:

.grid-container {    display: grid;    grid-template-columns: repeat(5, 1fr);    grid-gap: 2px;  }    .grid-item {    border: 1px solid black;    padding: 5px;  }    .grid-row-wrapper {    display: contents;  }    .grid-row-wrapper > .grid-item {    background: skyblue;  }

<div class="grid-container">    <div class="grid-item">1</div>    <div class="grid-item">2</div>    <div class="grid-item">3</div>    <div class="grid-item">4</div>    <div class="grid-item">5</div>    <div class="grid-row-wrapper">      <div class="grid-item">6</div>      <div class="grid-item">7</div>      <div class="grid-item">8</div>      <div class="grid-item">9</div>      <div class="grid-item">10</div>    </div>    <div class="grid-item">11</div>    <div class="grid-item">12</div>    <div class="grid-item">13</div>    <div class="grid-item">14</div>    <div class="grid-item">15</div>    <div class="grid-item">16</div>    <div class="grid-item">17</div>    <div class="grid-item">18</div>    <div class="grid-item">19</div>    <div class="grid-item">20</div>  </div>

EDIT: As with all implementations, you should check to ensure it works in your target environment(s). You can check the compatibility table on MDN or caniuse.com for support for display: contents:

• https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility
• https://caniuse.com/#search=display%3A%20contents

Answer 2

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>