This question already has answers here:
The difference between percentage and fr units
(3 answers)
Closed 5 years ago.
I've been experimenting with grids in css and come across the following.
I have created a container containing several divs
My .container creates a grid of 5 items having a width of 20%.
I added the grid-column-gap and noticed that it created a overflow in the container. I found that the grid-column-gap adds it's value to the grid-template-columns value. So I changed the value it 19%.
Now the items fit the grid. However my understanding is that grid-column-gap is added between the divs. What I'm having right now is that the last item also contains a gap at the right side.
I want to have the gaps between the divs and not at the end.
Please, see the Fiddle
Can anyone explain what I'm doing wrong?
Percentage units on grid are calculated as any other. If your unit is percentage it will add extra space to whole calculated area.
If however you add fr unit it will work similarly like flexbox and it will not add extra space.
Related
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
I am using display: flex to create a responsive card-based dashboard.
Fiddle here.
I noticed that the cards (each individual element div) all shrink or expand vertically to maintain the same size when in a row. So, the height of the biggest (or highest) card is inherited by the rest of the cards in the same row.
Note: When you resize the Fiddle window, you will notice this happens only when more than one card is present in a row. So, when the window is too small to allow only one card horizontally, the size is dependent on the content inside.
I can't seem to figure out which property is doing that so here's my question:
How to get the cards to NOT get resized?
OR
How to retain the responsiveness without using display: flex
If you don't want the cards to be resized, you should had align-items: flex-start on the flex container and remove the min-height: 250px on the cards. Maybe you can set height: auto on the cards
This question already has answers here:
flex-grow not sizing flex items as expected
(5 answers)
Closed 5 years ago.
I have a grid in flexbox, like so:
They're all positioned using flexbox, and then the panels themselves (the coloured bits) have margin: 5px.
codepen here: https://codepen.io/callumacrae/pen/bRoZdp
Because the top right section has two elements, there's more margin there, so it's pushing down slightly—I don't want this to happen!
I guess the two possible fixes are either to make the margins not do that, or make the components five pixels smaller instead of five pixels larger like they are right now - but I don't know how to do either of those things.
How can I make adding more elements not change the size of the parent?
The main problem is that you are sizing the elements using flex-grow. flex-grow is not the right property as it, together with flex-shrink is used to distribute the space left (or if to little).
You should use flex-basis, because as soon as you start fill these empty boxes with content, and their content will differ in size, they will misalign even more.
Here is an updated version of yours, where I changed to style="flex-basis: calc(50% - 10px);" (the 10px is to make up for your margins).
Codepen with flex-basis
And here is a version of yours, with the same text I used in mine
Codepen with flex-grow
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 years ago.
I have made a columnar layout that works fairly well for my needs, but I am experiencing an issue with the height of one column. I have prepared a jsBin that demonstrates the problem;
http://jsbin.com/mawuliyulo/1/edit?html,output
Basically, when you scroll down - eventually you start seeing white on the left side. Is there any way to force this to stretch all the way down indefinitely?
This is not using a flex-box layout. It is simply achieved using :before, and :after pseudo-selectors.
Add position:relative to your main-container class
This question already has answers here:
Making two different rows in bootstrap have same-height elements
(2 answers)
Closed 8 years ago.
I'll just post a picture to make this all easier to understand, as posting a JSfiddle would involve a huge amount of html and loads of formatting CSS (responsive picture triangles).
I have two rows in bootstrap, one row has 3 divs, each "col-sm-4". The second row has 4 divs, each "col-sm-3". There are large whitespace gaps where the columns adjoin, because the images are triangles. Is there anyway to maybe overlap the columns (or do something else entirely) to remove that whitespace and make all the triangles closer, and the same size?
col-sm-4 takes a width of 33.33% on the device viewport try decreasing the width of .col-sm-4 in your style sheet by giving it higher specificity meaning .col-sm-4 takes 33.33% in bootstrapmin.css in your stylesheet gives your outer div class name as triangle-container and in your stylesheet declare .traingle-container .col-sm-4 and give them a width of 15%. In that way it comes closer together.
the class dontwantpadding will do the trick for you. In your div you will just have to add the class so something like <div class="col-sm-4 dontwantpadding"></div>
in the custom css you will have a class:
.dontwantpadding {
margin: 0 !important;
padding: 0 !important;
}
This question already has answers here:
How to get this 2 columns layout (were one fits to content)
(3 answers)
Closed 4 months ago.
The columns should:
be full height
have vertical scrollbars if needed but no horizontal
This is what I got so far (along with a footer and a header)
http://jsfiddle.net/HZMCX/11/
The problem withmy code is that the right panel text starts at mid screen and not next to the left panel.
[Ignore this, this is so stackoverflow allows me to post the link to jsFiddle ]
Any ideas on how to fix this?
Thanks!
Your code can be applied much more simply than you currently have it:
Consider simply floating the side column and the primary content and setting fluid widths on both.
http://jsfiddle.net/MygUu/
Wrap the overall layout in a .container class, and set overflow to hidden.
.container {
overflow: hidden;
}
Additionally, it is best practice not to style using ID selectors. Hope that helps.