I imagine there is a simple way to do this, but I can't wrap my head around it.
I have a container that's display: grid, and all I need is:
if there are one or two children, it should have two columns
if there are more than two children, it should have three columns
I don't want to do with some logic that checks the number of children (I'm using emotion, by the way). There must be a way to do it with widths, grid-template-columns, etc.
Please help!
You can use grid-auto-columns co-jointly with grid-template-colums to have a minimum set amount of columns with more being added if there are enough children.
Related
Using display: flex on a wrapper element and flex-grow: 1 on every child, if you think of the layout as a single row of a table, the "columns" are separated equally (the space between each, no matter what the content is, is the same).
When using a table, however, the layout doesn't work like that, so the space between the columns makes the table look unbalanced. Here is an example to illustrate:
Is it possible for table columns to separate in a smarter way so that the separation between each is roughly similar?
I'm looking to achieve a similar result to the one that is explained here. I've included the exact snippet below:
flex: 1 1 0;
Here we are saying that the size of the item for the purposes of our
space distribution calculation is 0 — all the space is up for grabs
and as all of the items have the same flex-grow factor, they each get
an equal amount of space distributed. The end result is three equal
width, flexible items.
I will be working with a column of vertical children as aposed to a row of horizontal children, but the working shouldn't differ.
My issue is that in the above example, an explicit width (in my case, height) has been set, which I cannot do. I am looking to create four equally sized quarters regardless of the content each one contains.
In a nutshell – is there a way to have equal height child divs, with varying content, inside a parent with no explicit height?
Any help greatly appreciated!
After a lot of testing, I realised that using flexbox for this wasn't achievable (easily at least). Using CSS Grid however is incredibly straight forward. For anyone interested in the solution, it is as easy as giving each 'module' a value of 1fr.
I want to use bootstrap's well component on a horizontal form.
Most rows of the form only have one or two fields in a set of columns, and I am specifying the width of each column.
I would like to style some of the of rows in a well, but I don't want to have the well go across the entire screen, because it looks weird to have so much extra space to the right of the fields. I only want to style the maximum width of the columns in the rows.
If enclose the grid within a div of a set size, then all of the controls' sizes and positioning are affected.
Is there anyway to style a row this way?
Is there a way to create a div that has the right width, and position underneath the actual rows?
Does bootstrap have a way to specify justified columns, in the same way that I could do with tables? In other words, I know I want six columns across, but using span2 will give me six equal columns. But this will look inconsistent because some of my columns have less text than others, and I want them equally spaced.
If I resorted to tables and didn't specify column widths, it would distribute each column width proportionately, giving me the exact effect I'm looking for.
Any ideas?
No, you can not. Not unless you want to tweak the grid yourself. Having a span2 column that has less width than other span2 columns breaks the layout and defeats the point.
One possibility is to create an inner div inside the column and give it either padding or margins to make its content area smaller.
Otherwise, just roll your own grid and use that instead. It's fairly easy.
Now this is a tricky question, with the concern of not using tables or JavaScript for this task.
Basically I have a five columned row, one column takes any type of content that can extend the height, but the task is to make the sibling columns take up the same height as that column with fluid content.
Demo: http://jsfiddle.net/Mrg5E/
As you can see in the second row, it has bigger content inside it that takes up the height, but this breaks the siblings height too.
I've looked around proposed answers, mainly using tables or JavaScript - this is something I need to avoid this. I've also looked at hacks such as the Holy Grail, etc, but this is mainly for 2-3 columns when I have 5 columns (sometimes 4).
Is there a possible fix in CSS to match all the siblings heights?
If you have no idea what the one column with variable content's height will be, then no, you can't do this with CSS alone. You will need to either fake it, or use javascript.
If you have a fixed width layout, you could try the faux column technique. That's "faking it" with a background image that tiles vertically, giving the illusion that the columns are the same height. The example in the article uses two columns, but there is no reason you can't use it for five.
The other way is using javascript. If you are using jquery, there is a plugin that can help you out. The basic idea is to identify the greatest column height, then apply that height to the other columns.
Use the min-height property and for cross browser solution, take a look at:
http://css-tricks.com/snippets/css/cross-browser-min-height/
Working Example