If you don’t clearly specify the position of grid items, CSS Grid’s default auto-placement algorithm fixes it. By default, this algorithm starts from the top left and fills the grid with elements, row by row, to the bottom right. You can control features of this automatic placement using specific properties on the grid container.
Properties related to automatic placement:
- grid-auto-flow
- grid-auto-rows and grid-auto-columns
- auto-fit and auto-fill
grid-auto-flow
- This property controls the direction in which indirectly added items flow within the grid.
- Tracks are automatically generated when grid items are placed outside the clear grid defined by grid-template-* properties.
Values:
- row: This is the default value. Each element fills up the current row and adds new rows as necessary.
- column: Each element fills up the current column and adds new columns as necessary. You can switch the flow to go across the page instead of down.
- dense: This keyword can be added to row or column (e.g., row dense, column dense). It causes the grid algorithm to attempt to fill gaps in the grid that result from items spanning multiple tracks, even if it means changing the display order of some grid items from their source order. row dense is equivalent to just using dense.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Explicitly define columns */
/* Items will fill columns first, creating new columns as needed */
grid-auto-flow: column;
/* If you add 'dense', smaller items will backfill gaps */
/* grid-auto-flow: column dense; */
background-color: #2196F3;
padding: 10px;
gap:20px 20px;
grid-auto-columns: 100px 150px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<section class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
<div class="item item7">Item 7</div>
<div class="item item8">Item 8</div>
<div class="item item9">Item 9</div>
<div class="item item10">Item 10</div>
<div class="item item11">Item 11</div>
<div class="item item12">Item 12</div>
</section>
</body>
</html>Or to show the effect of dense filling gaps:
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Example grid */
grid-auto-rows: 1fr; /* Example auto row sizing */
grid-gap: 1em;
/* Apply dense to attempt to fill gaps */
grid-auto-flow: dense;
}
.portfolio .featured {
grid-row: span 2;
grid-column: span 2; /* These featured items create gaps */
}grid-auto-rows and grid-auto-columns
- The properties are applied to the grid container.
- They specify the size for any implicit grid tracks (rows or columns) that are automatically created when grid items are placed outside the clear grid. By default, contained grid tracks have a size of auto, meaning they grow to fit their content.
- grid-auto-rows controls the height of indirectly created rows.
- grid-auto-columns controls the width of indirectly created columns.
- You can provide a single size value, or a list of sizes that will repeat as a pattern for successive tracks.
Example Code:
.container {
display: grid;
grid-template-columns: 200px 200px; /* Explicit 2 columns */
grid-template-rows: 200px 200px; /* Explicit 2 rows */
/* Any extra items placed automatically will create 200px x 200px tracks */
grid-auto-rows: 200px;
grid-auto-columns: 200px;
}We are using a repeating pattern for implicit tracks.
.container {
display: inline-grid;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px;
/* Implicit rows will alternate between 100px and 150px height */
grid-auto-rows: 100px 150px;
/* Implicit columns will alternate between 100px and 150px width */
grid-auto-columns: 100px 150px;
}Another example using grid-auto-rows: 400px for automatic rows in a dashboard layout.
auto-fit and auto-fill
The keywords used within the repeat() function, most commonly with grid-template-columns or grid-template-rows, paired with the minmax() function.
They allow the grid to automatically add as many grid tracks (columns or rows) as can fit into the available space based on a specified size limitation. They are useful for creating responsive grids that adjust the number of columns/rows without media queries.
auto-fill: Adds as many tracks as possible without overflowing the container. Empty grid cells that don’t have content placed in them are left in place. This can result in space at the end if there aren’t enough items to fill all generated tracks.
What is auto-fit in CSS Grid?
auto-fit: Behaves similarly to auto-fill initially, but after placing grid items, it collapses any empty tracks. The remaining tracks (those with content) then stretch to fill the available space.
auto-fit is preferred the non-empty columns to always fill the entire width of the container. auto-fill might be used if you want to ensure you get a specific track size and possibly leave space at the end.
Example Code using minmax() and repeat():
.container {
display: grid;
/* Create as many columns as possible, each between 200px and 1fr */
/* If there aren't enough items to fill all potential columns, */
/* the existing columns will stretch to fill the space. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.container {
display: grid;
/* Create as many columns as possible, each between 200px and 1fr */
/* If there aren't enough items to fill all potential columns, */
/* empty columns remain, potentially leaving space at the end. */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* This specific example uses a min(200px, 100%) to handle narrow screens */
/* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
}The automatic placement features, combined with clear placement methods using grid lines or grid areas, provide powerful tools for creating flexible and responsive layouts.
CSS3 Topics