I want to create a dynamic grid.
this is my current css. What am i missing that the row hight is not applied to the second row?
.container{
display: grid;
grid-template-columns: repeat(auto-fill, 170px);
grid-template-rows: repeat(auto-fill, 300px);
}
html:
<div class="container">
<div>
css
</div>
<div>
html
</div>
</div>
Related
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;">
<div class="card">...</div>
...
</div>
The issue was I had an extra div at the bottom of the grid that was too wide and creating the odd behaviour. So if you have a similar problem check all your children of grid.
I have a grid below with css.
In second row, The Document Date is Too close to Document Number. I tried changing 1fr to 3fr, didn't work.
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
I was going to add the following with margin-left. Just curious if there isa more professional with css grid, to separate the column spacing.
.second-column {
margin-left:5px;
}
You can use:
grid-gap
grid-row-gap
grid-column-gap
to add spacing to the grid
For example
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 3em;
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
Note that grid-row-gap and grid-column-gap are being phased out for row-gap and column-gap respectively.
Just add column-gap: 2rem; in rem or px as you want.
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem; /* added */
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
Currently, using grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
Behaves as follows: If there are more items than fit in a row (based off the min), then new rows are created. If there are fewer items than the row could take then the items expand to fill the remaining space.
But what if you don't want them to fill the space, but have a maximum size? Setting the item's max-width sort of solves the problem, but then spreads the items across the container. Instead of filling the space, or being spaced across the container, I'd like the items to have a max size and sit next to each other if the grid is wider than the total number of items.
Is this behaviour possible?
Snippet showing grid > total items
html {
font-size: 62.5%;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-template-rows: repeat(2, 20rem);
grid-gap: 1rem;
border: 1px solid lightgrey;
padding: 1rem;
}
.item {
background: lightblue;
// max-width: 35rem;
}
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
You should use auto-fill instead of auto-fit. The difference is that auto-fill fills the row with as many columns as it can fit and auto-fit expands the columns to fit them in the available space.
I created this jsfiddle with a solution.
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
This question already has answers here:
CSS-only masonry layout
(4 answers)
Flex box masonry in one flex-container
(1 answer)
Closed 3 years ago.
What would be the best way to make the following with flexbox? I would like 2 rows that are equal width columns, however, the last column to be 100% height and fill the rest of the section.
Would it be best to use multiple rows for this?
.row {
display: flex;
flex-wrap: wrap-reverse;
}
.col {display:1;width:30%;background:red;}
.col:nth-of-type(3) {background:blue;}
<div class="row">
<div class="col">
test
</div>
<div class="col">
test
</div>
<div class="col">
test
</div>
<div class="col">
test
</div>
<div class="col">
test
</div>
</div>
Here is a solution using CSS grid layout:
Define the row as grid container using display: grid.
Define the 3-column layout by using grid-template-columns: repeat(3, 1fr)
Define the 2-column layout by using grid-template-rows: repeat(2, 1fr)
Span the third column to all the rows by using grid-row: span 2.
Adjust the gaps between the rows & columns using grid-gap property.
See demo below:
.row {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
grid-gap: 10px; /* gap between the rows & columns */
}
.col {
background: red;
}
.col:nth-of-type(3) {
background: blue;
grid-row: span 2; /* span all the rows */
}
<div class="row">
<div class="col">test</div>
<div class="col">test</div>
<div class="col">test</div>
<div class="col">test</div>
<div class="col">test</div>
</div>
I would like to use CSS Grid to create a set of unevenly sized content columns which, for smaller viewports, stack vertically instead of horizontally.
My starting point is this codepen, which has three repeated columns of equal size that stack when you change the size of the viewport (by making the browser window smaller, for example). That pen starts out looking like this:
When I halve the available screen space, it shrinks down to like this:
This automatic breaking behavior is achieved with the follow grid definition in CSS:
.wrapper-wrapper {
display: grid;
grid-template-columns: 1fr minmax(0, 1024px) 1fr;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
grid-column: 2/-2;
}
I modified this code to use unevenly sized columns in this codepen:
.layout {
display: grid;
grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
grid-column: 2 / -2;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));
grid-gap: 10px;
}
But when I resize the browser window, instead of stacking in the rows like the first example, this example does the following:
But I want the following to happen:
The only difference between the first example and the second is that in the second, an unevenly sized grid column layout is used. If I modify the following line:
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));
And replace it with:
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr));
As in the first example, it begins to do what I want again.
What do I need to do to preserve this behavior in the uneven columns case?
The problem code:
.layout {
display: grid;
grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
grid-column: 2 / -2;
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(200px, 3fr)
minmax(200px, 4fr)
minmax(200px, 3fr));
grid-gap: 10px;
}
.content-section {
background: lightblue;
}
.item-image {
width: 100%;
}
<div class="layout">
<div class="content">
<div class="content-section sidebar left-sidebar">
<div class="left-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
<div class="content-section content-main">
<div class="center-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
<div class="content-section sidebar right-sidebar">
<div class="left-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
</div>
</div>