Filling empty cells in CSS Grid Layout
Working with CSS Grid Auto Placement
The CSS grid-auto-flow property controls how auto-placed grid items are placed in the grid.
This property has three possible values:
row(the default)columndense
With dense, the auto-placement algorithm fills unoccupied cells with items that fit.
Here's your code, with grid-auto-flow: dense on the grid container:
$('div.tile').click(function() { $('div.tile').not(this).removeClass('chosen'); $(this).toggleClass('chosen'); var colCount = $('div.wrapper').css('grid-template-columns').split(' ').length; console.log(colCount); var placement = $(this).css('grid-row'); console.log(placement);});body { margin: 0; padding: 0; background-color: #eee;}
.wrapper { display: grid; margin: 18px; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); grid-auto-rows: 286px; grid-gap: 18px; grid-auto-flow: dense; /* NEW */}
.tile { position: relative; background-color: #eee; background-color: #149; text-align: center; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.25);}
.tile.chosen { grid-row: span 2; grid-column: span 2;}
.tile.chosen::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; background-color: rgba(255, 255, 255, .2);}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="wrapper"> <div class="tile">A</div> <div class="tile">B</div> <div class="tile">C</div> <div class="tile">D</div> <div class="tile">E</div> <div class="tile">F</div> <div class="tile">G</div> <div class="tile">H</div> <div class="tile">I</div></div>make grid items automatically fill empty spaces
Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
.portfolio-holder { margin: 66px auto; display: flex; flex-wrap: wrap;}
.portfolio { margin: auto; display: grid; height: 100%; grid-template-rows: repeat(13, 200px); grid-template-columns: repeat(4, 200px); grid-gap: 10px; padding: 24px; grid-auto-rows: minmax(100px, auto);grid-auto-flow: row dense;/* here your CSS update */}.portfolio_hat { background: #fd3a1e; overflow: hidden; color: black; font-weight: 14px; display: flex; justify-content: center; align-items: center; font-size: 1.5em; background-size: cover; background-position: top left; position: relative;}
.portfolio_hat.tall { grid-row: span 2; grid-column: span 1;}
.portfolio_hat.wide { grid-row: span 1; grid-column: span 2;}
.portfolio_hat.small { grid-row: span 1; grid-column: span 1;}
.portfolio_hat.tall { grid-row: span 2; grid-column: span 2;}
@media (max-width:860px) {.portfolio { grid-template-rows: repeat(26, 40vw); grid-template-columns: repeat(2, 40vw); }}div {/* see them for demo */ border: solid 1px; padding: 1em; margin: 2px;}<section class="portfolio-holder"> <div id="port" class="portfolio"> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <div href="#" class="portfolio_hat tall"></div> <div href="#" class="portfolio_hat small"></div> <div href="#" class="portfolio_hat wide"></div> <div href="#" class="portfolio_hat large"></div> <!-- divs like the four above are generated from MYSQL DATABASE and there's a lot of them in a chaotic order --> </div></section>How to fill in extra grid items in empty spaces?
To get the look you've illustrated, I wouldn't bother with either grid or flexbox, just use regular inline blocks and turn off the wrapping.
div {
font-size: 30px;
font-family: sans-serif;
color: #a7e7a1;
white-space: nowrap;
font-weight: bold;
overflow: auto;
line-height: 1;
background-color: #22946e;
padding: 10px;
}
p {
margin: 0;
}
i {
display: inline-block;
background-color: #a7e7a1;
height: 22px;
width: 22px;
margin: 0 0.2rem;
border-radius: 3px;
}
span {
margin: 0 1px;
}<div>
<p><i></i><i></i><span>Fred</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i>David<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>
<p><i></i><i></i><i></i><i></i><span>James</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>
<p><i></i><i></i><i></i><i></i><i></i><i></i><span>William</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>
<p><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><span>Norman</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>
<p><i></i><i></i><i></i><span>Paul</span><i></i><i></i><i></i><i></i><i></i><i></i>Matthew<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>
</div>CSS GRID - grid-template-areas with empty cells and auto placement
Just leverage the default grid-auto-flow:row property and tell the "1st row - right" div where to start/end using grid-column.
Then you don't need the grid-areas at all.
Result:
.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: row; /*typo corrected*/}
.elem { text-align: center; color: white;}
.elem1 { background-color: blue;}
.elem2 { background-color: red; grid-column: 12/13;}
.elem3 { background-color: cyan;}
.elem4 { background-color: green;}
.elem5 { background-color: magenta;}
.elem6 { background-color: blue;}
.elem7 { background-color: red;}
.elem8 { background-color: cyan;}
.elem9 { background-color: green;}
.elem10 { background-color: magenta;}
.elem11 { background-color: blue;}
.elem12 { background-color: red;}
.elem13 { background-color: cyan;}
.elem14 { background-color: green;}
.elem15 { background-color: magenta;}
.elem16 { background-color: green;}
.elem17 { background-color: magenta;}
.elem18 { background-color: cyan;}
.elem19 { background-color: magenta;}
.elem20 { background-color: blue;}<div class="grid"> <div class="elem elem1"> elem1 </div> <div class="elem elem2"> elem2 </div> <div class="elem elem3"> elem3 </div> <div class="elem elem4"> elem4 </div> <div class="elem elem5"> elem5 </div> <div class="elem elem6"> elem6 </div> <div class="elem elem7"> elem7 </div> <div class="elem elem8"> elem8 </div> <div class="elem elem9"> elem9 </div> <div class="elem elem10"> elem10 </div> <div class="elem elem11"> elem11 </div> <div class="elem elem12"> elem12 </div> <div class="elem elem13"> elem13 </div> <div class="elem elem14"> elem14 </div> <div class="elem elem15"> elem15 </div> <div class="elem elem16"> elem16 </div> <div class="elem elem17"> elem17 </div> <div class="elem elem18"> elem18 </div> <div class="elem elem19"> elem19 </div> <div class="elem elem20"> elem20 </div></div>CSS grid auto-fill and full-width cell - empty columns
You can simply increase the minmax width here repeat(auto-fit, minmax(300px, 1fr)) from 300px to 450px but this will cause the layout to shrink into two rows to early but in full screen will fit into it so if you don't have any problem with the shrinking to early just the bellow
Example
* {
word-wrap: break-word;
}
#grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
border: 1px solid red;
grid-gap: 10px;
}
nav {
grid-column: 1 / -1;
border: 1px solid blue;
}
.col {
border: 1px dashed black;
}<div id="grid">
<nav>full width nav</nav>
<div class="col">Filling Empty Cells in CSS Grid LayoutFilling Empty Cells in CSS Grid LayoutFilling Empty Cells in CSS Grid LayoutFilling Empty Cells in CSS Grid LayoutFilling Empty Cells in CSS Grid LayoutFilling Empty Cells in CSS Grid LayoutFilling Empty Cells in CSS Grid Layoutaaaa</div>
<div class="col">bbbb</div>
</div>Wrapping css grid and streching one grid item to take up all empty columns
It can be achieved with display: flex. In addition, it is necessary to use flex-grow property.
As mdn says about flex-grow:
The flex-grow CSS property sets the flex grow factor of a flex item's
main size
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-element {
width: 10%;
border: 1px solid #000;
flex-grow: 1;
min-height: 120px;
box-sizing: border-box;
margin: 0 5px 10px;
justify-content: space-between;
text-align: center;
}<div class="flex-container">
<div class="flex-element">
1
</div>
<div class="flex-element">
2
</div>
<div class="flex-element">
3
</div>
<div class="flex-element">
4
</div>
<div class="flex-element">
5
</div>
<div class="flex-element">
6
</div>
<div class="flex-element">
7
</div>
</div>Related Topics
Add CSS Styled Marker to Google Maps
Bootstrap Collapsed Menu Links Not Working on Mobile Devices
Using Queryselectorall(). Is the Result Returned by the Method Ordered
Detect Double Tap on iPad or iPhone Screen Using JavaScript
How to Execute a Function When Page Has Fully Loaded
Replace Multiple Strings at Once
Convert Special Characters to HTML in JavaScript
Event When User Stops Scrolling
How to Destructure All Properties into the Current Scope/Closure in Es2015
Modify Element :Before CSS Rules Programmatically in React
Change CSS Rule in Class Using Jquery
How to Detect in iOS Webapp When Switching Back to Safari from Background
Cross-Browser Window Resize Event - JavaScript/Jquery
Why Does JavaScript Replace Only First Instance When Using Replace