Kevin Powell - Community•2mo ago

does anyone know CSS grid well?

I am trying to arrange my project using the CSS grid , but I am failing miserably ! The first image is how I wanted it to be , and the second is my image , I can share the code via dm , can't share here , please if you know grid , help me out... #front-end

14 Replies

lko•2mo ago

It seems pretty similar, what's the part you have problems with? The boxes in the bottom?

Av003•2mo ago

It is not similar I have increased the sidebar height to 150vh and I do t want to do that, plus there is an extra space in diagnosis history , I don't want that , third look at the last column how above lab results patient info's height is a little bigger than lab results, I want that ☝🏻

lko•2mo ago

Can you share the css of the grid setup? Only the bit that controls the grid

Av003•2mo ago

.dashboard {
  display: grid;
  grid-template-areas:
    "navbar navbar navbar navbar"
    "sidebar diagnosis-history diagnosis-history patient-info"
    "sidebar diagnosis-history diagnosis-history patient-info"
    "sidebar diagnostic-list diagnostic-list lab-results";
  grid-template-columns: 320px 1fr 1fr 300px;
  /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
  grid-template-rows: 70px auto auto 1fr;
  /*changed 3rd element to auto from 1 fr */
  gap: 10px;
  /* height: 100vh; */
  padding: 10px;
  margin-bottom: 1em;
  width: 98%;
  margin: 0 auto;
}

.dashboard {
  display: grid;
  grid-template-areas:
    "navbar navbar navbar navbar"
    "sidebar diagnosis-history diagnosis-history patient-info"
    "sidebar diagnosis-history diagnosis-history patient-info"
    "sidebar diagnostic-list diagnostic-list lab-results";
  grid-template-columns: 320px 1fr 1fr 300px;
  /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
  grid-template-rows: 70px auto auto 1fr;
  /*changed 3rd element to auto from 1 fr */
  gap: 10px;
  /* height: 100vh; */
  padding: 10px;
  margin-bottom: 1em;
  width: 98%;
  margin: 0 auto;
}

I don't mind sharing the complete css , but can't share the react code Should I share that on codepen

Cawl•2mo ago

"It is not similar I have increased the sidebar height to 150vh and I do t want to do that" may I know what happens if you don't set the sidebar height to 150vh? "there is an extra space in diagnosis history" are you using heading tags? they have margin by default. you can set the margin to 0

lko•2mo ago

you just have to create 3 columns

<div class="grid">
  <div class="chat"></div>
  <div class="main"></div>
  <div class="side">
    <div class="a"></div>
    <div class="b"></div>
  </div>
</div>

<div class="grid">
  <div class="chat"></div>
  <div class="main"></div>
  <div class="side">
    <div class="a"></div>
    <div class="b"></div>
  </div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
    outline: 1px solid red;
}

html,body {
  height: 100%;
}

body {
  background-color: #eee;
}

.grid :is(.chat,.main,.a,.b) {
  background-color: white;
}

.grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  height: 100%;
}

.grid > * {
  height: 100%;
}

.grid :is(.chat,.side) {
  min-width: 10rem;
}

.grid .side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.grid .side * {
  flex-grow: 1;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
    outline: 1px solid red;
}

html,body {
  height: 100%;
}

body {
  background-color: #eee;
}

.grid :is(.chat,.main,.a,.b) {
  background-color: white;
}

.grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  height: 100%;
}

.grid > * {
  height: 100%;
}

.grid :is(.chat,.side) {
  min-width: 10rem;
}

.grid .side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.grid .side * {
  flex-grow: 1;
}

Av003•2mo ago

Thanks for the help , I solved it , I was using trial and error method and removed all grid area code and instead used the old fashioned way by using grid column and grid rows , also for the sidebar i removed extra height and set it to 100 vh and flex - grow 1 , it worked

Av003•2mo ago

Just need to do media queries now , thanks for the help , hopefully media queries on the grid will be easy.

clevermissfox•2mo ago

If you just need the cols to stack them put your current grid code into a min-width media query and then outside of that query the patients, diagnosis history and profile will stack for mobile . Instead of undoing your grid for a max-width query

Av003•2mo ago

Nah man , it will not work for me , I have a complex code here I did try but it broke all the atyles Styles*

clevermissfox•2mo ago

It’s many parts of a grid yes but you just need to break it down into pieces. Usually why people add in complexity so you’re not having to undo and break everything when you just want a one column layout for mobile. You’ll get it done !

Av003•2mo ago

Can I share my code with you over the dm?

clevermissfox•2mo ago

If you want to send a codePen or codesandbox sure but disclaimer I’m not a grid expert

Gaming

Programming

does anyone know CSS grid well?