Make a div height fit contet
Hello, can someone tell what to do to make any of my div with cards scaleable with items in him?
https://codepen.io/artusss0/pen/jOQEVmq
30 Replies
you've added a fixed height, that's why
you're probably better off using Grid for the "bottom" (aka main content area) rather than flexbox.
then every of div inside will have same height?
I guess so:
avoid using a reset for all margins on everything.
you end app adding them back all over again and working with DIVs and SECTION and such this setting is futile: none of them have margins or paddings by default.
what does that mean
repeat(4, 1fr)it will create for equal columns using the available space
oh didnt know that, i saw that somewhere so i was sure its good
pleas consult MDN for CSS properties
im reading it now
look up Rachel Andrews on YT.
She has excellent content on Grid with many short and useful samples.
https://codepen.io/artusss0/pen/jOQEVmq
is it possible to make their height fit to items?
so the blue yellow and green don't stretch down? yes with align-self.
your html nesting appears to be messed up, there are .items outside of .cards
also cleanup those inline styles as already suggested yesterday and have all your styles in the style sheet only.
and use one class name for these card item wrappers to control their layout, paddings and white space, and their individual names for the coloring only.
I will do it in a moment and add it to codepen
every item is inside of right card so i dont know why all cards are same height. and i cleared html so there is no css in it and added same names to card classes
https://codepen.io/artusss0/pen/jOQEVmq
can u tell me why their height is same?
you've given them a height of 100%
also add this to .bottom
align-items: start;love u bro <33
you can simplify the whole bit. Grid takes care of all the sizing, so less is often more
change 1rem to 10px to match the other gutters
so in
.section i added so much unnecessary code that were a default in css,
like adding display: block; to div that i created?is there any way to fix this?
yes. div is a block elements by default just like span is inline.
The initial styles of each en every HTML element is documented on MDN.
The only property you might want to always reset in
* is box-sizing: border-box. All the other stuff was needed +15 years ago when browser did all sort of crap and we had to deal with Internet Explorer. Browsers are pretty consistent these days and follow standards. MDN will tell you what to expect from any HTML element.
display also has no effect on Grid items or Flex items on how they interact or flow with their siblings.
They essentially all become blocks when the grid and flex layout algorithms of their parent element takes over and controls their sizing and positioning within the grid/flexbox.on left side its normal
can you be more specific what to be fixed?
its to big
1 or 2px
okay ill add this to my code and read mdn about it
remove all extra margins for the elements inside the grid and flexbox. they'll cause overflow.
avoid absolute values and percentages to size these items. Both grid and Flexbox will do their magic to use the available space.
if you must, use
max-width in favour of width to restrict sizes
sus
margin: 2px idk how did it get thereit's been there all along, which is why I removed it. same for the widht and height stuff. for a gird item all of this not needed. see the version I posted earlier
i was sure i deleted it, didnt copy code cause i need to remember it and most importantly understand it
unfortunately, this is what the beginnings with css look like :((
😂 I know
thanks for all your help today, u are amazing
you're welcome.
Have fun and check our Rachel's videos. They'll be of great help to learn grid.
And of course all of @Kevin's excessive work on these subjects 🙂
When I started watching it, I decided that I would rather not use it, now I know that it was a mistake
Thank you again, I hope I will find such good help here in other situations as well