Is it possible to have a large cell in the middle of a Bootstrap 3 grid? - html

Is it possible to have a larger nested cell that spans rows and columns using the Bootstrap 3 Grid CSS?


No need any bootstrap. You only need to setup one cell using grid-area. More about it here https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
Browsers support of grid-area https://caniuse.com/#search=grid-area thanks to Gerard
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
min-height: 300px;
}
.grid > div {
background: #ccc;
}
.grid > div.my-big-sell {
grid-area: 2 / 2 / 4 / 6;
background: #000;
}
<div class="grid">
<div class="my-big-sell"> </div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Related

CSS make squared grid cells with uneven rows and columns [duplicate]

This question already has answers here:
CSS grid square layout [duplicate]
(4 answers)
Closed 2 months ago.
In HTML I create a grid container, and style it in the following way:
height: 95%;
display: grid;
grid-template-columns: repeat(8, auto);
I then fill my grid with divs styled in the following manner.
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
background-color: red;
position: relative;
As you can see the tiles are squared, but the grid 'cells' are rectangles. I would like to make the cells squared, so that the gap between tiles on different rows is no longer there.

You can use the gap property to define the gaps between the grid cells. Also make sure, you haven't set the align-content property to a value, that creates space between the rows.
.container {
height: 95%;
display: grid;
gap: 4px;
grid-template-columns: repeat(8, auto);
}
.container > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
background-color: red;
position: relative;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

CSS Grid auto-flow dense only changes flow of narrow elements

My grid has 1fr and 3fr wide elements. Both elements have the same height.
This is how the grid looks with normal row flow:
This is how grid looks with "grid-auto-flow: dense":
As you can observe, the last narrow element moves upwards to fill the gap, but still leaves a gap before the 3fr cell.
This is how I would expect the "grid-auto-flow: dense" to work:
Is there any way to make the grid-auto-flow: dense reflow wide elements to completely avoid gaps?
Thank you.

Grid can't change order of element than way. As a solution I can suggest a little trick. Lats agree that our 3fr element will always be the last one in query. So at that point we could add to it some simple check using :nth-child()
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
grid-gap: 10px;
margin-bottom: 100px;
}
.grid>div {
height: 100px;
background: #ddd;
}
.three {
grid-column: 1 / 4;
grid-row: 1; /* starts form the fist row gap*/
}
.three:nth-child(4),
.three:nth-child(5),
.three:nth-child(6) {
grid-row: 2;
}
.three:nth-child(7),
.three:nth-child(8),
.three:nth-child(9),
.three:nth-child(n+9) /* for any element position > 9 */ {
grid-row: 3;
}
<div class="grid">
<div></div>
<div></div>
<div class="three"></div>
</div>
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div class="three"></div>
</div>
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="three"></div>
</div>

Is it possible to place all the items in grid in one row when I don't know the number of columns?

I'm trying to make a grid container that has undefined number of columns and I want it to be one row. Is there any way to do this in CSS?
.grid {
display: grid;
grid-gap: 5px;
}
.grid > div {
background: #ccc;
min-height: 100px;
}
<div class="grid">
<div></div>
<div></div>
<div></div>
</div>

There is two ways actually.
Using grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));. Fits new columns automatically and determines it's mimimum and maximum width. More about Grid Template Columns and auto-fit/auto-fill.
Using grid-auto-flow: column;. Determines automatically placement behavior of grid cells. More about Grid auto flow.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
grid-gap: 5px;
margin-bottom: 5px;
}
.grid2 {
display: grid;
grid-auto-flow: column;
grid-gap: 5px;
margin-bottom: 5px;
}
.grid > div, .grid2 > div {
background: #ccc;
min-height: 100px;
}
<div class="grid">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

List of card with ads on float right using flex or grid

I want to implement this html structure. I tried using flex but doesn't work as last ads column is not the same height and can take up to 2 - 4 rows. and i want to make it responsive too so on resize cards will go on next row if they did not find enough space.
.ads {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-column: 6 / span 2;
grid-row: 1 / span 3;
margin: 0;
float: none;
}
.container {
display: grid;
grid-gap: 22px;
justify-content: space-between;
}
.card {
margin:0;
}

Good news is - we can add ads in a parent container, which is 3 rows height. Here you go
.main-grid {
display: grid;
grid-template-columns: repeat(7, 1fr); /* determines 7 columns with same width */
grid-auto-rows: minmax(100px, auto); /* determines the height of the row */
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.main-grid>div {
background: #eee;
}
.main-grid>div.ads-grid {
background: none;
grid-area: 1 / 6 / 4 / 8; /* row-start / column-start / row-end / column end */
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.main-grid>div.ads-grid>div {
background: #000;
}
/* example for screens less than 460 */
#media (max-width: 460px) {
.main-grid {
grid-template-columns: repeat(4, 1fr);
}
.main-grid>div.ads-grid {
grid-area: 1 / 3 / 4 / 5;
}
}
<div class="main-grid">
<div class="ads-grid">
<div></div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Don't forget to correct .main-grid {grid-template-columns: repeat(7, 1fr)} and .main-grid>div.ads-grid {grid-area: 1 / 6 / 4 / 8;} with #media width changing for small screens. More about grid-area here https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
And not a single flex was given that day.

CSS Grid Column Stretch to Fill Entire Row / Or Centered In Row? [duplicate]

This question already has answers here:
Aligning grid items across the entire row/column (like flex items can)
(3 answers)
Closed 4 years ago.
I have a basic grid setup as follows:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
grid-gap: 1rem;
}
When the grid auto-breaks into new rows, I either want the elements on the new rows to take up a proportional amount of space or be centered so that they look nice.
For example, if I have 3 elements in one row, then I want each to take up 33% of the container space. But when the grid breaks and only 1 element is on the new row, I want that element to either take up 100% of the row width, or at least look centered -- which is contrary to the default behavior of placing the element all the way to the left and taking up only 1fr of space.
Similarly, if there are 2 elements on the new row, then each should take up 50% of the row space or the two together should look centered.
I don't know how many elements there will be in total. Ideally, the solution should work for a minimum of 1 up to an arbitrary number of elements.
If anyone has any ideas, please let me know. Thanks.

This is a job for flexbox, I don't think it will be easy to achieve with CSS grid:
.grid-container {
display: flex;
flex-wrap:wrap;
border:1px solid;
margin:2px;
}
.grid-container>div {
height: 50px;
background: red;
margin: .5rem;
flex: 1 1 calc(33% - 1rem);
}
<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
If you want the element to be centred simply do this:
.grid-container {
display: flex;
flex-wrap:wrap;
border:1px solid;
margin:2px;
justify-content:center;
}
.grid-container>div {
height: 50px;
background: red;
margin: .5rem;
flex: 0 1 calc(33% - 1rem); /*disable the flex-grow*/
}
<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>