Question 414598 in Html Question posted in
Some basic documentation can be found here.

Html – How to style one cell of css grid in different color

I’d like to make a css grid with cells having a collapsed light grey border, but one cell that is in focus to have a blue border. Here is an example:

body {
  margin: 25px;
  background-color: #ddd;
}
.grid {
  display: grid;
  grid-template-columns: 10rem 10rem auto;
  grid-gap: 1px;
  width: 100%;
}
.cell {
  outline: 1px solid #ccc;
  /* box-shadow: 0 0 0 1px #ccc; */
  padding: 5px;
}
.col-1 {
  grid-column: 1;
}
.col-2 {
  grid-column: 2;
}
.col-3 {
  grid-column: 3;
}
.selected {
  border: 1px solid blue;
  /* outline: 1px solid blue; */
  /* box-shadow: 0 0 0 1px blue; */
}
<h4>Grid</h4>
<div class="grid">
  <div class="header cell col-1">Header Col 1</div>
  <div class="header cell col-2">Header Col 2</div>
  <div class="header cell col-3">Header Col 3</div>
  <div class="data cell col-1">Row 1 Col 1</div>
  <div class="data cell col-2">Row 1 Col 2</div>
  <div class="data cell col-3">Row 1 Col 3</div>
  <div class="data cell col-1">Row 2 Col 1</div>
  <div class="data cell col-2 selected">Row 2 Col 2</div>
  <div class="data cell col-3">Row 2 Col 3</div>
  <div class="data cell col-1">Row 3 Col 1</div>
  <div class="data cell col-2">Row 3 Col 2</div>
  <div class="data cell col-3">Row 3 Col 3</div>
</div>

I tried playing with border, outline and grid-gap, but just can’t get it exactly right. Either the entire blue border doesn’t display, or the cell borders are not collapsed. Using box-shadow instead of outline doesn’t help either.

Is there a solution here? Thanks.

Tags:

3

Answers


  1. 0

    Im not entirely sure what you intend with ‘collapsed’ grey borders, but have you tried using a border-color with a selected class overriding this default grey color?

    body {
  margin: 25px;
  background-color: #ddd;
}
.grid {
  display: grid;
  grid-template-columns: 10rem 10rem auto;
  width: 100%;
}
.cell {
  border: 1px solid #ccc;
  padding: 5px;
}
.col-1 {
  grid-column: 1;
}
.col-2 {
  grid-column: 2;
}
.col-3 {
  grid-column: 3;
}
.selected {
  border-color: blue;
}
    Login or Signup to reply.
  2. 0

    You can do this trick: color the backgrounds…

    .grid-3c {
  display               : grid;
  width                 : 35rem;
  grid-template-columns : 10rem 10rem auto;
  grid-gap              : 1px;
  --borders-color       : #ccc;
  background-color      : var(--borders-color);
  border                : 1px solid var(--borders-color);
  }
.grid-3c > div {  /*  cells */
  background-color : white;
  padding          : .2em .3em;
  }
.grid-3c > div.selected {  /*  cells */
  outline                : 1px solid blue;
  }
    <h4>Grid-3c</h4>
<div class="grid-3c">
  <div>Header Col 1</div>
  <div>Header Col 2</div>
  <div>Header Col 3</div>
  <div>Row 1 Col 1</div>
  <div>Row 1 Col 2</div>
  <div>Row 1 Col 3</div>
  <div>Row 2 Col 1</div>
  <div class="selected">Row 2 Col 2</div>
  <div>Row 2 Col 3</div>
  <div>Row 3 Col 1</div>
  <div>Row 3 Col 2</div>
  <div>Row 3 Col 3</div>
</div>
    Login or Signup to reply.
  3. 0

    outline appears to works fine if you give the selected element position: relative to adjust the z-index automatically.

    enter image description here

    body {
  margin: 25px;
  /*   background-color: #ddd; */
}

.grid {
  display: grid;
  grid-template-columns: 10rem 10rem 10rem;
  grid-gap: 1px;
  width: 100%;
}

.cell {
  outline: 1px solid #ccc;
  /* box-shadow: 0 0 0 1px #ccc; */
  padding: 5px;
}

.col-1 {
  grid-column: 1;
}

.col-2 {
  grid-column: 2;
}

.col-3 {
  grid-column: 3;
}

.selected {
  /*   border: 1px solid blue; */
  outline: 1px solid blue;
  /* box-shadow: 0 0 0 1px blue; */
  position: relative;
}
    <div class="grid">
  <div class="header cell col-1">Header Col 1</div>
  <div class="header cell col-2">Header Col 2</div>
  <div class="header cell col-3">Header Col 3</div>
  <div class="data cell col-1">Row 1 Col 1</div>
  <div class="data cell col-2">Row 1 Col 2</div>
  <div class="data cell col-3">Row 1 Col 3</div>
  <div class="data cell col-1">Row 2 Col 1</div>
  <div class="data cell col-2 selected">Row 2 Col 2</div>
  <div class="data cell col-3">Row 2 Col 3</div>
  <div class="data cell col-1">Row 3 Col 1</div>
  <div class="data cell col-2">Row 3 Col 2</div>
  <div class="data cell col-3">Row 3 Col 3</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search