Auto-Placement
When you place items in the grid, you:
- Manually specify some items (which row/column they should go in).
- The remaining items are automatically placed.
- That is, the grid system automatically decides where the remaining items should fit.
- This process is called auto-placement.
The Auto-Placement tab is useful when you:
- Have a lot of grid items.
- Or you don’t want to manually position each one.
grid-auto-rows
The grid-auto-rows property specifies the height of any rows that are automatically created in the grid.
For example, if you have defined only two rows but more items are added (requiring a third row), the grid will automatically create that extra row—and its height will be determined by the grid-auto-rows value.
Example:
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-auto-rows: 80px;
}The first two rows are manually 100px high.
If there are more items, the grid will automatically create the third and fourth rows with a height of 80px.
In simple words:
“This sets the default height for rows you haven’t defined.”
grid-auto-columns
The grid-auto-columns property specifies the width of any additional columns that are automatically created in the grid.
For example, if you have defined only two columns but an item is placed in a third column, the grid will automatically create that extra column—and its width will be determined by the grid-auto-columns value.
Example:
.grid-container {
display: grid;
grid-template-columns: 100px 200px;
grid-auto-columns: 150px;
}Explanation:
We manually defined the first two columns (100px and 200px).
If any grid item is placed in the third column, the grid will automatically create that column—and its width will be 150px, as defined by grid-auto-columns.
In simple words:
For any columns that are not manually defined, this property sets their default width.
grid-auto-flow
The grid-auto-flow property defines how grid items are automatically placed in the grid — whether they should fill row by row, column by column, or follow a dense filling pattern (which tries to fill empty spaces).
Default value: row
Syntax:
grid-auto-flow: row | column | row dense | column dense;- grid-auto-flow: row;
This is the default behavior.
Items are placed row-wise (from left to right).
When there’s no more space in a row, the next items automatically move to the next row. - grid-auto-flow: column;
In this mode, items are placed column-wise (from top to bottom).
When a column is filled, the next items move to the next column. - grid-auto-flow: row dense;
The keyword “dense” means that the grid will try to fill any empty spaces.
Instead of leaving gaps, it moves smaller items into those spaces to make the layout more compact.
Example:
If a large item skips over some cells, the grid automatically fills the leftover spaces with smaller items — ensuring no wasted space. - grid-auto-flow: column dense;
This works the same way as row dense,
but the filling happens column-wise — from top to bottom — instead of row-wise.
In simple words:
grid-auto-flow controls how the browser automatically arranges items in the grid — whether it fills rows or columns first, and whether it should try to fill empty spaces tightly.
Combined Example of grid-auto-row, grid-auto-column, grid-auto-flow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Moments Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #fff;
margin: 0;
padding: 0;
}
header {
text-align: center;
padding: 50px 20px 20px;
}
header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
color: #00eaff;
}
header p {
color: #ccc;
font-size: 1.1rem;
}
.gallery {
display: grid;
grid-template-columns: 250px 250px;
grid-auto-rows: 200px;
grid-auto-columns: 250px;
grid-auto-flow: row dense; /* Try: row | column | row dense | column dense */
gap: 15px;
justify-content: center;
padding: 40px;
}
.card {
background: #ffffff10;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.9);
}
.card .info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
padding: 10px 15px;
}
.card .info h2 {
font-size: 1rem;
margin: 0;
color: #00eaff;
}
.card .info p {
font-size: 0.8rem;
color: #ccc;
}
/* Make some cards span multiple rows/columns */
.card:nth-child(2) {
grid-row: span 2;
grid-column: span 2;
}
.card:nth-child(5) {
grid-row: span 2;
}
footer {
text-align: center;
padding: 30px;
color: #aaa;
font-size: 0.9rem;
}
footer strong {
color: #00eaff;
}
@media (max-width: 700px) {
.gallery {
grid-template-columns: 1fr 1fr;
padding: 20px;
}
}
</style>
</head>
<body>
<header>
<h1>Travel Moments Gallery</h1>
<p>Discover how CSS Grid auto properties create magic in real layouts!</p>
</header>
<section class="gallery">
<div class="card"><img src="beach.png" alt=""><div class="info"><h2>Sunny Beach</h2><p>Warm sand & waves</p></div></div>
<div class="card"><img src="mountain.png" alt=""><div class="info"><h2>Mountain Escape</h2><p>Breathe the cold air</p></div></div>
<div class="card"><img src="city.png" alt=""><div class="info"><h2>City Lights</h2><p>Urban energy</p></div></div>
<div class="card"><img src="forest.png" alt=""><div class="info"><h2>Green Forest</h2><p>Peaceful trails</p></div></div>
<div class="card"><img src="desert.png" alt=""><div class="info"><h2>Golden Desert</h2><p>Vast horizons</p></div></div>
<div class="card"><img src="snow.png" alt=""><div class="info"><h2>Snow Peaks</h2><p>Frozen beauty</p></div></div>
<div class="card"><img src="island.png" alt=""><div class="info"><h2>Tropical Island</h2><p>Paradise found</p></div></div>
</section>
<footer>
Designed by <strong>Ritik Kumar</strong> | Powered by <strong>CSS Grid Magic</strong>
</footer>
</body>
</html>Explanation:
1. grid-auto-rows
The first row holds the first two cards.
When more cards are added, new rows are automatically created by the grid.
Each row has the same 200px height, keeping our gallery evenly spaced and well-organized.
If we increase grid-auto-rows to 300px, each automatically created row becomes taller.
If we decrease it to 150px, the gallery becomes more compact vertically.
So, grid-auto-rows controls the vertical rhythm and height consistency of our grid layout.
2. grid-auto-columns
If any card tries to occupy a third column (beyond our defined two), the grid system will automatically generate that new column.
The width of that new column will be 250px, so it visually matches the existing ones.
For example, our second card:
.card:nth-child(2) {
grid-row: span 2;
grid-column: span 2;
}This card spans across two columns.
If there’s another item that ends up needing more horizontal space, a new column (with 250px width) will be auto-created — keeping the layout alignment intact.
So, grid-auto-columns ensures uniform column width whenever new columns are generated beyond the defined ones.
- grid-auto-flow
When one of our cards (like .card:nth-child(2) or .card:nth-child(5)) takes up extra space,
there can be small empty gaps below or beside it.
The dense keyword makes the grid automatically shuffle smaller items to fill those spaces,
creating a compact and visually balanced layout.
If we change this line to:
grid-auto-flow: column;then the cards will fill top to bottom (column-wise), instead of left to right (row-wise).
If we remove dense, the grid will not try to fill small gaps and may leave some empty spaces.
So, grid-auto-flow decides the direction and filling logic for our automatically placed items.