CODEWITHSUNDEEP
csscss-grid
jonnie
jonnie

Reputation: 745

CSS Grid: lines with labels

I'm building a pure css chart using css-grid. Is there a way to label the grid lines with text? In the attached image, I want to label the vertical lines: 1, 2, 3, 4.

Codepen

grid-template-columns: 150px repeat(12, 1fr);

enter image description here

Upvotes: 2

Views: 1699

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

You could use :after pseudo element to add numbers for each line and you can use css counter to increment number for each column based on the number of element in the first row.

You can start the counter from 1 instead of 0 by defining the second parameter on counter-reset which is the number.

.grid {
  display: inline-grid;
  position: relative;
  counter-reset: columnLines 1 rowLines 1;
  grid-template-rows: repeat(3, 100px);
  border: 1px solid black;
  margin: 25px;
}

.row {
  display: grid;
  position: relative;
  grid-template-columns: repeat(3, 100px);
  counter-increment: rowLines;
}

.row:not(:last-child) {
  border-bottom: 1px solid black;
}

.row > div:not(:last-child) {
  border-right: 1px solid black;
}

/*Column lines*/
.row:first-child:before {
  content: "1";
  transform: translate(-50%, -100%);
  position: absolute;
  top: 0;
  left: 0;
}

.row:first-child > div {
  counter-increment: columnLines;
  position: relative;
}

.row:first-child > div:after{
  transform: translate(50%, -100%);
  content: counter(columnLines);
  position: absolute;
  top: 0;
  right: 0;
}

/*Row lines*/
.row:after {
  transform: translate(100%, 50%);
  content: counter(rowLines);
  position: absolute;
  bottom: 0;
  right: -5px;
}

.grid:before {
  transform: translate(100%, -50%);
  position: absolute;
  right: -5px;
  content: "1";
  top: 0;
}
<div class="grid">
  <div class="row">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="row">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="row">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Upvotes: 2

Related Questions