+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: CSS Grid Auto-fit and Minmax (/showthread.php?tid=5189)
CSS Grid Auto-fit and Minmax - Qomplainerz - 07-26-2023
Description:
CSS Grid's auto-fit and minmax() functions are helpful for creating responsive and flexible grid layouts with a fixed minimum and maximum size for grid items.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Auto-fit and Minmax Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.grid-item {
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<!-- Add more items here -->
</div>
</body>
</html>
Explanation:
In this example, the .grid-container uses display: grid to create a grid layout. The grid-template-columns property uses repeat(auto-fit, minmax(200px, 1fr)) to generate as many columns as possible with a minimum width of 200px and a maximum width of 1fr (one fractional unit of the remaining space). This ensures that the grid items adjust responsively, creating new columns when the container width increases and collapsing them when the width decreases.