Kevin Powell - Community•3y ago

Filling remaining space

Any idea on how to fill the remaining space from the left div to occupy the same as the right? They're both under the same parent, with a d-flex.

50 Replies

Myndi•3y ago

This is the semantic ~~god forbid my sins for some inline styles~~.

<div class="d-flex m-0 p-0 mb-4 flex-wrap align-items-stretch">
  <div id="Data" class="col-12 col-lg-6 m-0 p-0 px-1 mb-3 mb-lg-0">
    <h3 class="fs-5">Data</h3>
    <div class="d-flex gap-1 p-3 flex-wrap flex-column">
      <p></p>
      <p></p>
      <p></p>
    </div>
  </div>

  <div id="Observations" class="col-12 col-lg-6 m-0 p-0 px-1">
    <h3 class="fs-5">Observations</h3>
    <div class="p-3">
      <p></p>
      <p></p>
    </div>
  </div>
</div>

<div class="d-flex m-0 p-0 mb-4 flex-wrap align-items-stretch">
  <div id="Data" class="col-12 col-lg-6 m-0 p-0 px-1 mb-3 mb-lg-0">
    <h3 class="fs-5">Data</h3>
    <div class="d-flex gap-1 p-3 flex-wrap flex-column">
      <p></p>
      <p></p>
      <p></p>
    </div>
  </div>

  <div id="Observations" class="col-12 col-lg-6 m-0 p-0 px-1">
    <h3 class="fs-5">Observations</h3>
    <div class="p-3">
      <p></p>
      <p></p>
    </div>
  </div>
</div>

b1mind•3y ago

Use Grid >.>;; It would apply the same height to both

Myndi•3y ago

I remember there was a way to stretch it with flex, but I can't remember.

Unknown User•3y ago

Message Not Public

Myndi•3y ago

This won't help me, as the <h3> are on top of the box, and not inside of it 😔 The documentation is so extended, I'm looking into it. I have never tried anything with it. Do you have an idea of what I can do? I was trying this:

.data-obs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: stretch;
}

#Data {
  place-self: center stretch;

}

.data-obs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: stretch;
}

#Data {
  place-self: center stretch;

}

But it's clearly not helping. Actually nevermind, I will figure it out some other day.

b1mind•3y ago

use place-content: center; on grid parent. (or align-content) place-self and items will shrink the child to max content of itself https://codepen.io/b1mind/pen/PoeQxrV

Myndi•3y ago

Myndi•3y ago

The exact same problem arises 😓

b1mind•3y ago

Look at my pen again

Myndi•3y ago

I used your pen.

b1mind•3y ago

Not sure why you are setting align but heh

Myndi•3y ago

Myndi•3y ago

This is what I did.

.grid
  .child
    h1 header
    .childer
      p some text
      p some other text
      p some text
      p some other text
  .child
    h1 header
    .childer
      p some text
      p some other text

.grid
  .child
    h1 header
    .childer
      p some text
      p some other text
      p some text
      p some other text
  .child
    h1 header
    .childer
      p some text
      p some other text

b1mind•3y ago

you added grandchildren* xD

Myndi•3y ago

That's how I have it structured above. It's a header and some paragraphs, inside a div.

b1mind•3y ago

you can't change the structure? color the first child the color you want and don't color the grandchild?

Myndi•3y ago

The child can't have any background, the only one with background is the grandchild.

b1mind•3y ago

updated for you https://codepen.io/b1mind/pen/PoeQxrV?editors=1100

MarkBoots•3y ago

flex options (sorry b1) https://codepen.io/MarkBoots/pen/MWGQZwj

Mark Boots

CodePen

MWGQZwj

...

b1mind•3y ago

I'm trying to get people into grid you need to stap it 😂

MarkBoots•3y ago

actually. im so comfortable with grid, that sometimes I have to practice flex but you are right, as always

Myndi•3y ago

Thank to both of you. I'm still not familiar with grid. What would be a good way to make them responsive in certain viewports? Just a @media? Based on what could it be? Or rather, what would it need to target.

MarkBoots•3y ago

b1's grid option you can use grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) instead of grid-auto-flow then it will break by itself when column get's smaller than 10rem or you use a media query to change the grid-auto-flow: column to row (or just remove = the same) same with the my flex option, it will already go below eachother when there is no space, but if you want to control a certain breakpoint, you can do it with a media query to add flex-direction: column to the .container

Myndi•3y ago

With flex I'm more familiar, in this case I wanted to check grid, since I knew nothing about it.

Myndi•3y ago

https://gyazo.com/e6b8b4f38e944000afa210b848b3a96b

Gyazo

Myndi•3y ago

I tried your alternative, but this occurs. The minmax (20rem) is causing it, but I'm not sure what that implies.

MarkBoots•3y ago

minmax(20rem) will just make it 20rem. you don't need that

Myndi•3y ago

How can I make it so it behaves like the above divs? https://gyazo.com/4c9b0c2e17fc1884e4869716abdbc2ac

Gyazo

Myndi•3y ago

Shown in this example.

MarkBoots•3y ago

there must be a media query changing the flex-direction

Myndi•3y ago

Yeah, in the below I'm using grid. The above, I'm using flex and queries. As I know how to use flex already, was trying to learn the hang of grid.

MarkBoots•3y ago

ah okay, sorry, you are using grid now. (misunderstood) yea, you'll need a media query for that to, to change grid-auto-flow: column to grid-auto-flow: row (so not the grid-template-columns as i've suggested before) you can use the same media query

Myndi•3y ago

Hmm, I think it does nothing.

b1mind•3y ago

This actually touches on when I would use flex or grid. I really love flex wrap for if I need the child content to determine the change.

MarkBoots•3y ago

same same if grid-template-columns repeat minmax could only have a suggestive minwidth

Myndi•3y ago

I set it up like this:

.data-obs-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  gap: .25em;
}

@media only screen and (min-width: 990px) {
  .data-obs-grid {
    grid-auto-flow: row;
  }
}

.data-obs-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  gap: .25em;
}

@media only screen and (min-width: 990px) {
  .data-obs-grid {
    grid-auto-flow: row;
  }
}

Unless I'm legit tired and I can't see the error.

b1mind•3y ago

remove the template, its a hard value that will take over auto-flow

Myndi•3y ago

Actually, it was max-width before. Hmm, so if I have template, I can't change it, right?

b1mind•3y ago

you can just do 1fr vs changing auto-flow

MarkBoots•3y ago

one or the other yes

Myndi•3y ago

Actually, this doesn't look half bad.

Myndi•3y ago

I like it more than split in even sizes.

MarkBoots•3y ago

little explanation 1. grid-auto-flow, just determines the direction the childs are put. Width of childs will be adjusted to content 2. grid-template-columns sets the specific amount of columns with a specific witdth if you want to change in a media query for smaller devices 1. from grid-auto-flow: column to grid-auto-flow: row 2. from grid-template-columns: 1fr 1fr to grid-template-columns: 1fr think this helps making a choice. you can play around with it to see what you like the most

Myndi•3y ago

I assume, with the second you meant columns to row, right? But yeah, I learnt something new definitely, even with flex. Never used the flex: 1 property. I just need to get the hang of grid. Thank to you both! It's greatly appreciated.

b1mind•3y ago

Yea def glad you are looking at grid options. Both is always the right answer. Having more tools just lets you do more. flex: is short hand btw so what you are actually seeing is flex-grow really powerful to learn grow, shrink and basis (though i use min-widths normally)

MarkBoots•3y ago

that's where i struggle just because i don't use it enough.

b1mind•3y ago

honestly that is where I think grids just easier lol, but having the children control the wrap point is really handy

MarkBoots•3y ago

yup

William_O^2•3y ago

Where is your .container and .row? If you need Bootstrap to manage your layout, please follow the HTML structure.

Myndi•3y ago

I tried before. It didn't work. Why are you assuming things.

Gaming

Programming

Filling remaining space