Advanced Grid Layout for Dashboard

20maty 0
Viewed 34

I am trying do do a Dashboard like with an CSS Grid Layout. I never worked with Grids and most of online tutorials are not useful because its such complex.

This is my Figma Design (width & height are not exactly accurate, just a scratch)

enter image description here

These are my beginnings of doing it without a Grid. I did some workarounds with margin and stuff.

.secure-margin {
  margin: 1vw;
}

.inner-box {
  position: absolute;
  margin-top: 0.5vw;
  margin-left: 0.8vw;
}

.dash-welc {
  background-color: rgba(144, 22, 216, 0.8);
  width: 64vw;
  height: 11.09vw;
  border-radius: 2vw;
  margin-bottom: 1vw;
}

.dash-welc-tit {
  font-family: 'Chakra Petch';
  font-size: 22px;
  font-size: 2vw;
  font-weight: bolder;
}

.dash-welc-txt {
  font-family: 'Roboto Black', sans-serif;
  font-size: 1.5vw;
}

.dash-info {
  position: absolute;
  background-color: rgba(144, 22, 216, 0.8);
  width: 29vw;
  height: 49vw;
  left: 66.5vw;
  top: 1vw;
  border-radius: 2vw;
  margin-bottom: 1vw;
}
<div class="secure-margin">
  <!--Wrapper Around Dash-->
  <div class="dash-welc">
    <div class="inner-box">
      <h1 class="dash-welc-tit">Wilkommen,
        <?php echo $daten['firstname']." ".$daten['lastname']; ?>
      </h1><br>
      
      <h1 class="dash-welc-txt">Hier im Dashbaord siehst du die wichtigsten Informationen zu deinem Charakter.<br> Willst du deine Fraktion verwalten oder andere Aktionen durchführen,<br> wähle es links im Menu aus.</h1>
    </div>
  </div>

  <div class="dash-info">
    <div class="inner-box"></div>
  </div>
</div>

This is my result...

enter image description here

But I think its better todo it with a Grid. Gap between every Element and the sides should be 1.5vw

Would be nice if someone experienced could just Scratch this up and explain a little bit.

css-grid css html
1 Answers

I have created a simple example for you. It has a basic layout like you need, you just need to tweak it to match a bit better your design, but I think you can do that.

.grid {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 3fr 3fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
  grid-template-areas: "top top right" "leftOne middleOne right" "leftOne middleTwo right" "leftTwo middleThree right" "leftTwo middleFour right";
  background-color: darkgrey;
  padding: 1rem;
}

.cell {
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.cell--pink {
  background-color: pink;
}

.cell--green {
  background-color: green;
}

.cell--red {
  background-color: red;
}

.top {
  grid-area: top;
}

.right {
  grid-area: right;
}

.leftOne {
  grid-area: leftOne;
}

.leftTwo {
  grid-area: leftTwo;
}

.middleOne {
  grid-area: middleOne;
}

.middleTwo {
  grid-area: middleTwo;
}

.middleThree {
  grid-area: middleThree;
}

.middleFour {
  grid-area: middleFour;
}
<div class="grid">
  <div class="cell cell--pink top">top</div>
  <div class="cell cell--pink right">right</div>
  <div class="cell cell--pink leftOne">left 1</div>
  <div class="cell cell--pink leftTwo">left 2</div>
  <div class="cell cell--green middleOne">middle 1</div>
  <div class="cell cell--green middleTwo">middle 2</div>
  <div class="cell cell--red middleThree">middle 3</div>
  <div class="cell cell--red middleFour">middle 4</div>
</div>

Boguz0
Related