Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Grid Auto-fit and Minmax
#1
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.
Also follow me on Youtube for videos about video games:
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos
Reply


Messages In This Thread
CSS Grid Auto-fit and Minmax - by Qomplainerz - 07-26-2023, 07:41 PM

Possibly Related Threads…
Thread Author Replies Views Last Post
  CSS Grid Masonry Layout Qomplainerz 0 644 07-26-2023, 07:54 PM
Last Post: Qomplainerz
  CSS Custom Scrollbar Styles (Webkit and Firefox) Qomplainerz 0 433 07-26-2023, 07:52 PM
Last Post: Qomplainerz
  CSS Object Fit and Object Position Qomplainerz 0 348 07-26-2023, 07:50 PM
Last Post: Qomplainerz
  CSS Box Decoration Break Qomplainerz 0 379 07-26-2023, 07:49 PM
Last Post: Qomplainerz
  CSS Conic Gradients for Circular Progress Bar Qomplainerz 0 360 07-26-2023, 07:48 PM
Last Post: Qomplainerz
  CSS Grid Subgrid Qomplainerz 0 370 07-26-2023, 07:46 PM
Last Post: Qomplainerz
  CSS Variable Fonts Animation Qomplainerz 0 366 07-26-2023, 07:44 PM
Last Post: Qomplainerz
  CSS Scrollbar Styling Qomplainerz 0 374 07-26-2023, 07:43 PM
Last Post: Qomplainerz
  CSS clip path Qomplainerz 0 376 07-26-2023, 07:38 PM
Last Post: Qomplainerz
  CSS Feature Queries Qomplainerz 0 336 07-26-2023, 07:05 PM
Last Post: Qomplainerz

Forum Jump:


Users browsing this thread: 3 Guest(s)