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


Possibly Related Threads…
Thread Author Replies Views Last Post
  CSS Grid Masonry Layout Qomplainerz 0 659 07-26-2023, 07:54 PM
Last Post: Qomplainerz
  CSS Custom Scrollbar Styles (Webkit and Firefox) Qomplainerz 0 447 07-26-2023, 07:52 PM
Last Post: Qomplainerz
  CSS Object Fit and Object Position Qomplainerz 0 361 07-26-2023, 07:50 PM
Last Post: Qomplainerz
  CSS Box Decoration Break Qomplainerz 0 397 07-26-2023, 07:49 PM
Last Post: Qomplainerz
  CSS Conic Gradients for Circular Progress Bar Qomplainerz 0 371 07-26-2023, 07:48 PM
Last Post: Qomplainerz
  CSS Grid Subgrid Qomplainerz 0 381 07-26-2023, 07:46 PM
Last Post: Qomplainerz
  CSS Variable Fonts Animation Qomplainerz 0 383 07-26-2023, 07:44 PM
Last Post: Qomplainerz
  CSS Scrollbar Styling Qomplainerz 0 391 07-26-2023, 07:43 PM
Last Post: Qomplainerz
  CSS clip path Qomplainerz 0 394 07-26-2023, 07:38 PM
Last Post: Qomplainerz
  CSS Feature Queries Qomplainerz 0 343 07-26-2023, 07:05 PM
Last Post: Qomplainerz

Forum Jump:


Users browsing this thread: 4 Guest(s)