I want to remove the worthless margin between rows, so I want every div takes the content height without giving margin to his side div, I tried everything but nothing works.
.grids {
width: 90%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(min-content, max-content);
margin: auto;
grid-gap: 32px;
}
.grid {
position: relative;
width: 95%;
height: max-content;
margin: 10px;
padding: 20px;
background: black;
border-radius: 10px;
}
<div class="grids">
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
</div>
Edit: To make a masonry layout I have wrapped grid items in div tag
so you can nest as many tags as you want.
grid items overflow the content because of the width and height properties.
you're using a grid gap for both rows and columns.
So I guess this might help you out.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: masonry;
grid-gap: 10px;
}
.grid-item {
padding: 20px;
background: red;
border-radius: 10px;
margin-bottom: 24px;
}
<div class="grid">
<div>
<div class="grid-item">
<h1>Hello world</h1>
</div>
<div class="grid-item">
<h1>Hello world</h1>
</div>
</div>
<div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div>
<div class="grid-item">
<h1>Hello
<br>
friend
</h1>
</div>
<div class="grid-item"></div>
</div>
</div>
Also, I renamed the classes for naming purposes only.
MDN docs grid-row: row-gap
MDN docs masonry layout: masonry layout
You can try to set grid-gap: 32px to grid-gap: 0 32px, it will remove the margin between grid rows;
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed last year.
Is there a responsive way (not using min-width) to minimise a width of a parent when children do not take the entire space that parent has, given that the width of the children is hard set?
Problem
Solution
.parent {
display: flex;
flex-wrap: wrap;
border: 1px solid grey;
}
.child {
background: lightgrey;
height: 50px;
width: 40vw;
margin: 10px;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Try to add width: fit-content; to your .parent
UPD: try this approach (using grid system)
.parent {
display: grid;
border: 1px solid grey;
grid-template-columns: repeat(2, minmax(min-content, max-content));
width: fit-content;
}
.child {
background: lightgrey;
height: 50px;
width: 40vw;
margin: 10px;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child" style="width: 30vw"></div>
<div class="child" style="width: 33vw"></div>
<div class="child" style="width: 27vw"></div>
<div class="child" style="width: 35vw"></div>
</div>
I've got two columns in a parent container of 600px width. The children’s character length dictates the column width (weighted split). However, as both columns become increasingly similar in their width, a balanced (50/50 split) layout should be preferred, illustrated below.
Is it possible to achieve this kind of layout in flexbox or grid, without javascript? I imagine determining string length and switching css properties according to a threshold would be an option that I don't want to go down.
My intention isn't to create a single type of split but rather to make the layout respect both splits conditionally.
.container {
outline: 1px solid red;
width: 100%;
height: 60px;
display: flex;
}
.child {
padding: 0.5px;
outline: 1px solid black;
display: grid;
place-content: center;
}
.grow {
flex-grow: 1; /* flexible split */
}
.balanced {
width: 100%; /* 50-50 split */
}
<div class="container">
<div class="child grow">
asdasdasdasd
</div>
<div class="child grow">
asdaassdasdasdsdasdasd
</div>
</div>
<div class="container">
<div class="child balanced">
asdasdasdasd
</div>
<div class="child balanced">
asdaassdasdasdsdasdasd
</div>
</div>
Just add a maximum width?
.container {
outline: 1px solid red;
width: 100%;
height: 60px;
display: flex;
}
.child {
padding: 0.5px;
outline: 1px solid black;
display: grid;
place-content: center;
}
.grow {
flex-grow: 1;
max-width:50%;
}
.balanced {
width: 100%;
/* 50-50 split */
}
<div class="container">
<div class="child grow">
asdasdasdasd
</div>
<div class="child grow">
asdaassdasdasdsdasdasd
</div>
</div>
<div class="container">
<div class="child balanced">
asdasdasdasd
</div>
<div class="child balanced">
asdaassdasdasdsdasdasd
</div>
</div>
Isn't flex-grow alone solving directly your problem?
See the snippet:
.container {
outline: 1px solid red;
width: 100%;
height: 60px;
display: flex;
}
.child {
padding: 0.5px;
outline: 1px solid black;
display: grid;
flex-grow: 1; /* flexible split */
place-content: center;
}
<div class="container">
<div class="child">
asdasd
</div>
<div class="child">
asdaassdasdasdsdasdasd
</div>
</div>
<div class="container">
<div class="child">
asdasdasdasd
</div>
<div class="child">
asdaassdasdasdsdasdasd
</div>
</div>
<div class="container">
<div class="child">
asdaassdasdasdsdasdasd
</div>
<div class="child">
asdaassdasdasdsdasdasd
</div>
</div>
In the meantime I found the answer.
Setting flex-basis enforces a 50/50 split when column width is similar. The unequal split is respected by setting flex-grow and flex-shrink.
.parent {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 50%;
padding-right: 1em;
padding-left: 1em;
}
How do I go from here
To here
I'm trying to center the inner div's to their parent except for the last row where I'd like to align it left to the row above it.
Here is the jsfiddle for the top image https://jsfiddle.net/L15p2nev
.container {
text-align: center;
background-color: green;
}
.item {
display: inline-block;
width: 300px;
background-color: red;
}
<div class="container">
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
</div>
Using grid display layout, this can be archived.
You can set grid-template-columns: repeat(auto-fit, 300px) to align items as the image.
.container {
background-color: green;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.item {
display: inline-block;
background-color: red;
}
<div class="container">
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
</div>
Is there a way to style more than just the width of the grid gaps within the CSS grid layout module? I can't find anything about it in the documentation, however one would tend to think that it would be possible as grid gaps tend to be colored in many designs. If it is not possible, is there a workaround?
Sadly, there is currently no way in the CSS Grid spec to style grid-gap. I came up with a solution that works well though that involves just html and css: show border grid lines only between elements
Instead to use the solution above I recommend to use border with pseudo-classes because if you have an irregular amount of "table cells" you will end up with an ugly color filled cell at the end of the "table".
If you want to use borders between the "table cells" and you have not always the same amount of cells you can do something like this (this example would also work with flexbox):
.wrapper {
display: grid;
grid-template-columns: repeat(2, auto);
/* with flexbox:
display: flex;
flex-wrap: wrap;
*/
}
/* Add border bottom to all items */
.item {
padding: 10px;
border-bottom: 1px solid black;
/* with flexbox:
width: calc(50% - 21px);
*/
}
/* Remove border bottom from last item & from second last if its odd */
.item:last-child, .item:nth-last-child(2):nth-child(odd) {
border-bottom: none;
}
/* Add right border to every second item */
.item:nth-child(odd) {
border-right: 1px solid black;
}
<div class="wrapper">
<div class="item">BOX 1</div>
<div class="item">BOX 2</div>
<div class="item">BOX 3</div>
<div class="item">BOX 4</div>
<div class="item">BOX 5</div>
</div>
For instance: if one has a 5x5 grid of squares, is the only way to get colored grid lines to fill the grid with 25 elements and apply borders to those same elements?
You could do that, but grid borders do not collapse the same way that table borders can with the border-collapse property, and unlike grid gaps they'll be applied to the perimeter of your grid along with the inner borders, which may not be desired. Plus, if you have a grid-gap declaration, the gaps will separate your grid item borders much like border-collapse: separate does with table borders.
grid-gap is the idiomatic approach for spacing grid items, but it's not ideal since grid gaps are just that: empty space, not physical boxes. To that end, the only way to color these gaps is to apply a background color to the grid container.
I added the border color as a background-color to the grid and added a background color to all grid-items.
.grid {
width: 1000px;
display: grid;
background: #D7D7D7;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 200px;
grid-gap: 1px;
}
.grid-item {
background: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
This works for me.
It's not possible, but simply by setting a border in cascade:
this affects text and divs positions.
.grids {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
background: #222;
height: 326px;
width: 455px;
color: white
}
.grids > div {
border: 4px red solid
}
<div class="grids">
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
</div>
By using outline, the positions is unchanged:
.grids {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
background: #222;
height: 326px;
width: 455px;
color: white
}
.grids > div {
outline: 4px red solid;
}
<div class="grids">
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
</div>
There is a workaround way: use pseudo :after or :before in each column to apply background color to grid gap.
.grid-column::after {
position: absolute;
right: -20px; // grid-gap
top: 0;
height: 102px; // grid row height
width: 20px; // grid-gap
display: block;
content: '';
background-color: black !important;
}
If you don't know in advance how many columns will fit in your container, this is how I would do it (works for any number of columns and of any size. Also, this method do not style empty items):
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, auto));
grid-auto-rows: minmax(80px, auto);
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.grid-item {
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
/* not required */
.grid-item {
display: flex;
align-items: center;
justify-content: center;
background:#f5f5f5;
}
<div class="grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
<div class="grid-item">Item 10</div>
<div class="grid-item">Item 11</div>
<div>
You can also choose to leave out the grid gaps and use the border on the underlying div like so:
CSS:
.grid {
display: inline-grid;
border: red solid;
width: 200px;
height: 100%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.grid div {
border: red solid;
}
and the HTML:
<div className="grid">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
I believe this achieves what you wanted to achieve:
Setting background-color on grid will color your gaps.
For example:
section {
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
background-color: red;
}