Highlight column on CSS grid

user_3070639 0
Viewed 138

I need to apply an outline stroke to a column in a 3x3 CSS grid, while keeping the cells in that column separated (not merged). Is this possible with CSS grid?

Note: I can use multiple box-shadows to simulate the outline, but I'm looking for a cleaner, less hacky method.

enter image description here

.grid {
    display: grid;
    grid-template-areas: "cell1 cell2 cell3"
    "cell4 cell5 cell6"
    "cell7 cell8 cell9";
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

.grid > div {
    border: 1px solid #000;
}
<div class="grid">
    <div class="cell1">1</div>
    <div class="cell2">2</div>
    <div class="cell3">3</div>
    <div class="cell4">4</div>
    <div class="cell5">5</div>
    <div class="cell6">6</div>
    <div class="cell7">7</div>
    <div class="cell8">8</div>
    <div class="cell9">9</div>
</div>

css-grid css
1 Answers

You might need to change the order of your cell displays but the following appears to be close to what you want.

Note, it uses a combination of flexbox and grid displays and it is responsive to the size of the screen.

<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: https://stackoverflow.com/questions/62799173/highlight-column-on-css-grid 
 see also: https://codeburst.io/css-grid-layout-simple-guide-e0296cf14fe8
-->

<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
 .wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
 }
 .container {
    display: grid;
    grid-template-columns: 200px; 
    grid-template-rows: 200px 200px 200px;
 }
 .container > div {
    border: 1px solid #000;
    text-align: center; 
 }
 .bdr { border: 3px solid red; }
</style>

</head><body>

<div class="wrapper">
  <div class="container">
    <div class="cell1">1</div>
    <div class="cell2">2</div>
    <div class="cell3">3</div>
  </div>
  <div class="container">
    <div class="cell4">4</div>
    <div class="cell5">5</div>
    <div class="cell6">6</div>
  </div>
  <div class="container bdr">
    <div class="cell7">7</div>
    <div class="cell8">8</div>
    <div class="cell9">9</div>
  </div>
</div>

<script>
</script>

</body></html>

If you add the following you can change the border of the selected column.

<script>
 console.clear();

 function highlite(evnt, picks) {
   for(var i=0; i<picks.length; i++) { picks[i].classList.remove('bdr'); }
   evnt.target.parentElement.classList.add('bdr');
//   console.log(evnt.target.tagName+' : '+evnt.target.classList+' : '+evnt.target.parentElement.classList);
 }

 function init() {
   const sel = document.getElementsByClassName('container');
   for (var i=0; i<sel.length; i++) {
     sel[i].addEventListener('click', (e) => highlite(e,sel));
   }
 } init();
</script>
user_122697230
Related