CSS Grid Text Outside of Matrix

Question

So I have created this Matrix with Grid, and I am having issues styling the outside elements around my grid. On the left hand side(Y-Axis), I need the text to be rotated -90 degrees like it currently is but in line with the grid, and inbetween that and the grid I need numbers 1-5 going from bottom left to top left to represent the squares. On the bottom, I need the same thing, the text in-line and inbetween that and the grid numbers 1-5 going from left to right for those squares. Everytime I try to add something it pushes the grid down or to the side.

body {
  justify-content: center;
}

.box {
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  padding: 20px;
  font-size: 150%;
  border: 1px solid black;
  
}

.wrapper {
  width: 600px;
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-auto-flow: column;
}
#red {
  background-color: red;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
section {
  height: 100vh;
  display: grid;
  place-items: center;
}
p.likelihood {
   width: 25px;
   transform: rotate(-90deg);
   font-size: 30px;
   position: absolute;
   margin-top: 300px;
}
p.consequence {
   width: 25px;
   font-size: 30px;
   position: absolute;
}
p.11{
  position: absolute;
}


Likelihood


1



  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
    
  
  
    
  
  
    
  


Consequence

Ali Klein · Accepted Answer

I'm not sure if this is what you'd like, but playing around with absolute positioning top and left values and placing your titled p tags in a relatively positioned section (as well as adding some padding values), I believe I achieved what you're looking for?

UPDATE: I added the numbers in too, but tbh, this whole thing is "hackily" put together with arbitrary values... There's definitely a "better" way to do it, but this may achieve what you want.

.box {
  position: relative;
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  padding: 20px;
  font-size: 150%;
  border: 1px solid black;
}

.wrapper {
  margin: 60px 0 90px 90px;
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-auto-flow: column;
}

#red {
  background-color: red;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
section {
  position: relative;
  width: 600px;
}
p.likelihood {
   transform: rotate(-90deg) translateY(-50%);
   transform-origin: top;
   position: absolute;
   top: 50%;
   left: -20px;
   font-size: 30px;
   margin: 0;
}

p.consequence {
   font-size: 30px;
   position: absolute;
   transform: translateX(-50%);
   left: calc(50% + 45px);
   bottom: -60px;
   margin: 0;
}

.numbers-container {
  position: absolute;
  display: flex;
}

.numbers-container-x {
  padding-top: 10px;
  left: 90px;
  bottom: -25px; 
}

.numbers-container-x .number {
  width: 100px;
  text-align: center;
}

.numbers-container-y {
  flex-direction: column-reverse;
  left: 70px;
  top: 0;
}

.numbers-container-y .number {
  height: 100px;
  line-height: 100px;
}


  
    
    
    
    
    
    
    
    
    
    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    


    
    

    
    

    
  
  
  
    1
    2
    3
    4
    5
  
  
  
    1
    2
    3
    4
    5
  
  
  
    Likelihood
  
  
    Consequence

CSS Grid Text Outside of Matrix

Answers (1)

Related Questions