Trying to get width and height consistent same size
I am am trying to make the box that says from 5 to 10 meters to be same width and height for the 11 to 15 meters.
Here is my CSS code:
Does anyone know what I am missing here?
21 Replies
so basically it needs to be like this result
use display grid
and what other CSS properties do I need to add besides the
display: grid?for example
https://codepen.io/MarkBoots/pen/GRGdxGz
hmm
I am getting this
you dont have to set any sizes on the childs
otherwise, make a codepen so I/we can check
ah, true
lol, I am sitting on a Vue project, so not very easy to try and replicate it on the codepen
well, you can copy the rendered html and css from the devtools
true!
Let me try it out!
there!
you have set the grid on the single options, you need to set in on the group
and remove the margin from the .option (gap will take care of that)
isn't it directly on the single
.option class name?
that is because the class name is .button-select > .option {...}the grid defines the template where in the childs are placed.
You have an options group (grid) with single options (grid items)
sure! In this case, the option group is the parent element which I am using the CSS grid class. Isn't it correct what I did?
ooooh!
thank you so much for your help Mark!
I wasn't aware the
.button-select is the place I needed to add the grid!it is the div wrapping the single items. so thats the place to set the grid
yes! exactly! 😄