I have 4 divs, lets call them a,b,c,d. Their heights and widths can change (for example, during translation), but the height of a and b will always be equal (they are 1 row each). I want to arrange them in two columns, with a and c in the left column, b and d in the right column (the widths of the columns are NOT necessarily equal), but when this would cause overflow, I want them to fold into one column, ordered a-b-c-d top-to bottom. The closest I got was this:
.container {
display: grid;
grid-template-columns: repeat(2, max-content);
}
<div class="container">
<div style="width: 100px; height: 20px; background: red;">A</div>
<div style="width: 120px; height: 20px; background: yellow;">B</div>
<div style="width: 80px; height: 40px; background: green;">C</div>
<div style="width: 130px; height: 60px; background: blue;">D</div>
</div>
Changing the number in the repeat to 1 produces the expected arrangement, but repeat(auto-fill, max-content) doesn't work, as automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes (such as max-content, min-content, auto). Is there any way to achieve this?
Related
I am using a grid container on an html page; inside two adjacent divs in the grid I have some little divs. I want these little divs to appear at the same height so they are aligned across the page. I think that I've given them the same relevant properties, but they are sitting at slightly different heights, and the line spacing is different. Why this is happening and how to remedy it?
Relevant info: I'm looking at my HTML in Chrome.
Image of my uneven blocks:
image of divs at uneven heights
Relevant code:
The container is defined in CSS like this:
.container {
width: 100%;
display: grid;
grid-template-columns: 1fr 2fr 2fr 4fr 1fr;
height: 400px;
background-color: lightgreen;
}
The two columns of the container where the problem arises are columns 3 and 4 (2fr and 4fr columns). Those divs are defined as:
.wordDisplay {
padding-top: 100px;
text-align: center;
}
.display {
padding-top: 100px;
}
And the little blue-box divs that I want to appear at the same height are:
.a {
display: inline-block;
width: 50px;
height: 50px;
padding-top: 20px;
margin: 1%;
border: 1px solid blue;
background-color: lightgreen;
font-size: 20px;
text-align: center;
}
.a:hover {
background-color: yellow !important;
}
.b {
display: inline-block;
width: 150px;
height: 50px;
padding-top: 20px;
margin: 1%;
border: 1px solid blue;
background-color: lightgreen;
font-size: 20px;
text-align: center;
}
.b:hover {
background-color: yellow;
}
Remove margins to get full height, The problem is, you're using margin for the wrong purpose
margin has different behavior, you have to be careful while using it.
Ask yourself why I want to use it here.
Your use of it as a value does not mean the expected result because it depends on your code scenario.
I recommend you to read this article
to ensure that you understand margins clearly, you will know what issue is happened
it's something dirty call margin collapse
there are two fixes I will recommend for your situation:
If your HTML like that:
<div class="container">
<div class="wordDisplay">
<div class="b">
band
</div>
<div class="b">
band
</div>
</div>
<div class="display">
<div class="a">
b
</div>
<div class="a">
a
</div>
<div class="a">
n
</div>
<div class="a">
d
</div>
<div class="a">
b
</div>
<div class="a">
a
</div>
<div class="a">
n
</div>
<div class="a">
d
</div>
</div>
</div>
Change margin for class "a" to half of margin in class "b" so if you add margin:1% in class "b" change the value of margin in class "a" to 0.5% so that will solve your problem.
Change grid template columns for column 3 and 4 to two equals fractions like that
.container {
width: 100%;
display: grid;
grid-template-columns: 1fr 2fr 4fr 4fr 1fr;
height: 400px;
background-color: lightgreen;
}
I want to achieve 12 column grid behavior similar to what Bootstrap has,
but using CSS grids.
I need to have a fixed gaps in pixels
And have a 12 column grid, so I can decide how to place the children.
I'm facing the issue, that combination of grid-template-columns and column-gap doesn't shrink the columns on a smaller screens, but cause horizontal overflow on a screen.
How can I achieve expected behavior with shrinking without reducing the number of columns and keeping the gap in pixels.
DEMO:
.parent {
max-width: 300px;
height: 500px;
overflow: auto;
border: 1px solid blue;
}
.box {
grid-column: span 6 / span 6;
background: red;
height: 40px;
}
.grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 40px;
}
<div class="parent">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
I want to do something very basic, a table with 4 columns: 2 columns should be 50px each, the other 2 columns should take 50% of the remaining space each.
I'm surprised to find out that calc() does not work for setting width on table cells. So doing something like td { width: calc(50% - 100px); } is not a possibility.
Is there a way to achieve this with the table element or is using another layout method like flexbox the only choice?
You could use a grid layout with grid-template-columns
grid-template-columns: 50px 50px 1fr 1fr;
Defines 4 columns in your grid which represent (respectively) 50px, 50px and 1fr takes one fraction of the remaining space (twice)
.grid {
display: grid;
grid-template-columns: 50px 50px 1fr 1fr;
grid-gap: 1px;
}
.col {
height: 100px;
background-color: red;
}
.col:nth-child(2) {
background-color: yellow;
}
.col:nth-child(3) {
background-color: teal;
}
.col:nth-child(4) {
background-color: navy;
}
<div class="grid">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Width calculation for tables is a bit clunky, but can be improved by using table-layout: fixed because then cell widths will no longer be calculated based on what's inside the cells. And then you may not even need calc() anymore, although you definitely can.
It should also be noted that a table by default takes up the least width possible, it usually gets better if we tell the table to use 100% width (or whatever is needed in your case).
width: 100% combined with table-layout: fixed and no calc() gives the following results:
table {
width: 100%;
table-layout: fixed;
}
td {
background: #eee;
height: 70px;
}
td.fixed {
width: 50px;
}
td.rest {
width: 50%;
background: #fca;
}
<table>
<tbody>
<tr>
<td class="fixed">1</td>
<td class="fixed">234</td>
<td class="rest">a</td>
<td class="rest">bcd efg</td>
</tr>
</tbody>
</table>
You can use a grid system (Bootstrap) that can design table, It's a sample
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
I want to use CSS grid and the following is a mock-up of the aim:
I'm building an interface that should expand rightward to fill the browser screen; my current code causes column 2 of the outer grid to be as wide as the browser in addition to column 1; or maybe one of it's children is causing this and it's just expanding to accommodate. Either way, it's spilling off the page horizontally
So the code:
#main {
width: 100%;
display: grid;
grid-template-columns: 250px 100%;
grid-template-rows: 100px 100%;
}
#col-2-outer {
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 100%;
}
#row-1-inner {
grid-column: span 2;
}
#col-2-inner table {
width: 100%;
}
<div id="main">
<div id="col-1-outer"></div>
<div id="col-2-outer">
<div id="row-1-inner"></div>
<div id="row-2-inner">
<div id="col-1-inner"></div>
<div id="col-2-inner">
<table></table>
</div>
</div>
</div>
</div>
FYI, for the time being I've forgone template areas until I get a handle on the basics (unless this somehow solves my problem but I gather this is strictly a code organization feature?).
I'd suggest to change your markup with a 3x2 grid like below:
Remove the hierarchical structure like you have in your code and add one element for each section in the grid.
Note that in the rule grid-template-columns: 250px 150px auto, 250px is the width of your col-1-outer and 150px is the width of the col-1-inner.
Span the first column over the two rows by using grid-row: span 2
Span the first row in the second column by using grid-column: span 2.
Extend the table over the last grid item by using 100% width and height.
See demo below:
* {
border: 1px solid; /* For illustration */
}
#main {
width: 100%;
display: grid;
grid-template-columns: 250px 150px auto;
grid-template-rows: 100px auto;
}
#col-1-outer {
grid-row: span 2;
}
#row-1-inner {
grid-column: span 2;
}
#col-2-inner table {
width: 100%;
height: 100%;
}
<div id="main">
<div id="col-1-outer">col-1-outer</div>
<div id="row-1-inner">col2-row-1-inner</div>
<div id="col-1-inner">col2-row2-inner</div>
<div id="col-2-inner">
<table><tr><td>table</td></tr></table>
</div>
</div>
The 100% for the 2nd column in your grid-template-columns is based on the width of the container - rather than occupying the space outstanding within the container, it will push out to the right because the 2nd column is trying to match the width of the container.
Try changing this to auto and this should rectify the issue, as it will only take up the space up to the end of the container and no further.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
I've just started learning about CSS Grids and I'm struggling to achieve a certain layout. I have a grid with 4 columns and I want the total width of column 1 + column 2 to equal 50% of the grid and the total width of column 3 + column 4 to equal 50% of the grid. The tricky part is I need the individual columns to have variable widths, specifically columns 1 and 3 to expand with the text they contain and columns 2 and 4 to grow and shrink in relation to the width of columns 1 and 3. Is this possible using the grid layout?
I've been using codepen to test:
https://codepen.io/anon/pen/MqxJNW
<div class="outergrid">
<div class="one">One</div>
<div class="two">Two </div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
<div class="Seven">Seven</div>
<div class="Eight">Eight</div>
<div class="Nine">Nine</div>
<div class="Ten">Ten</div>
* {box-sizing: border-box;}
.outergrid
{
display:grid;
max-width: 540px;
margin: 0 auto;
grid-template-columns: repeat(4, auto);
grid-template-rows: repeat(3, auto);
gap: 5px 5px;
}
.outergrid > div
{
border: 2px solid rgb(233,171,88);
border-radius: 5px;
background-color: rgba(233,171,88,.5);
padding: 1em;
color: #d9480f;
word-break: break-word;
}
Thanks