How can I outline a whole column in CSS Grid

Question

Consider that I have a css grid with 4 cols and 8 rows.

Can I target the last 3 columns and put a 1px border around each of those 3 columns?

I can target each item in those columns, but I can't find a way to target the entire column as a single element.

I am using the well known standard CSS - Grid Layout https://codeburst.io/css-grid-layout-simple-guide-e0296cf14fe8

My grid is set up like: grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 16px;

I've looked into targeting all items inside a column (so, all 8 grey boxes in each column) and then adding a side border to them but then targeting the top and bottom items of each column and adding a top and bottom border respectively so that it does end up making the illusion of one entire border around the column, but I have to take out the "grid-gap: 16px" and it is A LOT of messing around with child, last-child, nth child etc and I figured there would be an easier way.

I guess what I am looking for would be a way to say, "hey, column 2, 3 and 4 of my grid, 1px solid red". But I can't see a way to simply identify a column.

I could show the markup and expand on this but it's really a matter of can I do it or can i NOT do depending on what we know about the grid-template-columns in CSS.

Thank you

The column is not an element so you can't, you would have to select the elements **in the column** (perhaps using `nth-child`) and go from there. — Paulie_D, Apr 13 '21 at 22:00

score 0 · Answer 1 · edited Apr 14 '21 at 04:53

If you give each section a unique selector name, I use class in my example, you can then place them in a pattern using grid-template-areas to create the grid. You can then use grid-area to place a div over each of the sections you wish to have the alternate border.

NOTE:

column2 column3 column4 css in the example below:

 grid-area: 1 / 2 / 9 / 3;

grid-area --> start on row X / column X / span X rows / X columns:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 2px 2px;
  grid-template-areas: "col1 col2 col3 col4" "row2-col1 row2-col2 row2-col3 row2-col4" "row3-col1 row3-col2 row3-col3 row3-col4" "row4-col1 row4-col2 row4-col3 row4-col4" "row5-col1 row5-col2 row5-col3 row5-col4" "row6-col1 row6-col2 row6-col3 row6-col4" "row7-col1 row7-col2 row7-col3 row7-col4" "row8-col1 row8-col2 row8-col3 row8-col4";
  width: 400px;
}

.sec {
  display: flex;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  background-color: #ddd;
  border: solid 1px blue;
  align-items: center;
  text-align: center;
  margin: 5px;
}

.col1 {
  grid-area: col1;
}

.col2 {
  grid-area: col2;
}

.col3 {
  grid-area: col3;
}

.col4 {
  grid-area: col4;
}

.row2-col1 {
  grid-area: row2-col1;
}

.row2-col2 {
  grid-area: row2-col2;
}

.row2-col3 {
  grid-area: row2-col3;
}

.row2-col4 {
  grid-area: row2-col4;
}

.row3-col1 {
  grid-area: row3-col1;
}

.row3-col2 {
  grid-area: row3-col2;
}

.row3-col3 {
  grid-area: row3-col3;
}

.row3-col4 {
  grid-area: row3-col4;
}

.row4-col1 {
  grid-area: row4-col1;
}

.row4-col2 {
  grid-area: row4-col2;
}

.row4-col3 {
  grid-area: row4-col3;
}

.row4-col4 {
  grid-area: row4-col4;
}

.row5-col1 {
  grid-area: row5-col1;
}

.row5-col2 {
  grid-area: row5-col2;
}

.row5-col3 {
  grid-area: row5-col3;
}

.row5-col4 {
  grid-area: row5-col4;
}

.row6-col1 {
  grid-area: row6-col1;
}

.row6-col2 {
  grid-area: row6-col2;
}

.row6-col3 {
  grid-area: row6-col3;
}

.row6-col4 {
  grid-area: row6-col4;
}

.row7-col1 {
  grid-area: row7-col1;
}

.row7-col2 {
  grid-area: row7-col2;
}

.row7-col3 {
  grid-area: row7-col3;
}

.row7-col4 {
  grid-area: row7-col4;
}

.row8-col1 {
  grid-area: row8-col1;
}

.row8-col2 {
  grid-area: row8-col2;
}

.row8-col3 {
  grid-area: row8-col3;
}

.row8-col4 {
  grid-area: row8-col4;
}

.column2 {
  grid-area: 1 / 2 / 9 / 3;
  border: solid 2px black;
  box-shadow: inset 0 0 5px black;
  border-radius: 10px;
}

.column3 {
  grid-area: 1 / 3 / 9 / 4;
  border: solid 2px black;
  box-shadow: inset 0 0 5px black;
  border-radius: 10px;
}

.column4 {
  grid-area: 1 / 4 / 9 / 5;
  border: solid 2px black;
  box-shadow: inset 0 0 5px black;
  border-radius: 10px;
}

<div class="grid-container">
  <div class="sec col1">
    <p>row 1 - column 1</p>
  </div>
  <div class="sec col2">
    <p>row 1 - column 2</p>
  </div>
  <div class="sec col3">
    <p>row 1 - column 3</p>
  </div>
  <div class="sec col4">
    <p>row 1 - column 4</p>
  </div>
  <div class="sec row2-col1">
    <p>row 2 - column 1</p>
  </div>
  <div class="sec row2-col2">
    <p>row 2 - column 2</p>
  </div>
  <div class="sec row2-col3">
    <p>row 2 - column 3</p>
  </div>
  <div class="sec row2-col4">
    <p>row 2 - column 4</p>
  </div>
  <div class="sec row3-col1">
    <p>row 3 - column 1</p>
  </div>
  <div class="sec row3-col2">
    <p>row 3 - column 2</p>
  </div>
  <div class="sec row3-col3">
    <p>row 3 - column 3</p>
  </div>
  <div class="sec row3-col4">
    <p>row 3 - column 4</p>
  </div>
  <div class="sec row4-col1">
    <p>row 4 - column 1</p>
  </div>
  <div class="sec row4-col2">
    <p>row 4 - column 2</p>
  </div>
  <div class="sec row4-col3">
    <p>row 4 - column 3</p>
  </div>
  <div class="sec row4-col4">
    <p>row 4 - column 4</p>
  </div>
  <div class="sec row5-col1">
    <p>row 5 - column 1</p>
  </div>
  <div class="sec row5-col2">
    <p>row 5 - column 2</p>
  </div>
  <div class="sec row5-col3">
    <p>row 5 - column 3</p>
  </div>
  <div class="sec row5-col4">
    <p>row 5 - column 4</p>
  </div>
  <div class="sec row6-col1">
    <p>row 6 - column 1</p>
  </div>
  <div class="sec row6-col2">
    <p>row 6 - column 2</p>
  </div>
  <div class="sec row6-col3">
    <p>row 6 - column 3</p>
  </div>
  <div class="sec row6-col4">
    <p>row 6 - column 4</p>
  </div>
  <div class="sec row7-col1">
    <p>row 7 - column 1</p>
  </div>
  <div class="sec row7-col2">
    <p>row 7 - column 2</p>
  </div>
  <div class="sec row7-col3">
    <p>row 7 - column 3</p>
  </div>
  <div class="sec row7-col4">
    <p>row 7 - column 4</p>
  </div>
  <div class="sec row8-col1">
    <p>row 8 - column 1</p>
  </div>
  <div class="sec row8-col2">
    <p>row 8 - column 2</p>
  </div>
  <div class="sec row8-col3">
    <p>row 8 - column 3</p>
  </div>
  <div class="sec row8-col4">
    <p>row 8 - column 4</p>
  </div>

  <div class="column2"></div>
  <div class="column3"></div>
  <div class="column4"></div>
</div>

Thank you. This is good because it uses the Grid's naming well. I did have a quick look into naming but thought that it would only be ideal to find an item in a column not the entire column itself, however, you have managed to isolate the entire column. I like this answer a lot. Thank you — Antistandard, Apr 13 '21 at 23:24
I love and appreciate how much work you put into answering this question. Thank you. I was also thinking of fixing the position of the 1st column and allowing the 2nd, 3rd, and 4th columns to scroll horizontally underneath the 1st column. Is that easy with Grids? I tried using grid-template-areas but I can't get it to work. Any thoughts? Thank you again. — Antistandard, Apr 14 '21 at 03:31

score 0 · Answer 2 · answered Apr 13 '21 at 22:56

You can approximate it using pseudo element and positionning. You may have to adjust some value based on your real code:

.container {
  margin:20px;
  display:grid;
  grid-gap:16px;
  grid-template-columns:repeat(4,1fr);
  position:relative;
}
.container div {
  height:80px;
  background:#f3f3f3;
}
.container::before,
.container::after,
.container :first-child::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  border:3px solid red;
  margin:-10px 0;
  border-radius:10px;
  width:calc((100% - 3*16px)/4 );
}
.container::after {
  right:25%;
}
.container :first-child::before {
  right:50%;
}

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

wow that's really clever. Thank you for the answer. I might run into a few problems with the way that it is overlayed and not exactly part of the grid itself, like, if I add another column dynamically or whatever in the future. BUT I really love the way you macgyvered that problem. this has definitely helped me think about this more laterally. Thank you — Antistandard, Apr 13 '21 at 23:22

How can I outline a whole column in CSS Grid

2 Answers2