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 655 07-26-2023, 07:54 PM
Last Post: Qomplainerz
  CSS Custom Scrollbar Styles (Webkit and Firefox) Qomplainerz 0 442 07-26-2023, 07:52 PM
Last Post: Qomplainerz
  CSS Object Fit and Object Position Qomplainerz 0 354 07-26-2023, 07:50 PM
Last Post: Qomplainerz
  CSS Box Decoration Break Qomplainerz 0 390 07-26-2023, 07:49 PM
Last Post: Qomplainerz
  CSS Conic Gradients for Circular Progress Bar Qomplainerz 0 366 07-26-2023, 07:48 PM
Last Post: Qomplainerz
  CSS Grid Subgrid Qomplainerz 0 380 07-26-2023, 07:46 PM
Last Post: Qomplainerz
  CSS Variable Fonts Animation Qomplainerz 0 380 07-26-2023, 07:44 PM
Last Post: Qomplainerz
  CSS Scrollbar Styling Qomplainerz 0 388 07-26-2023, 07:43 PM
Last Post: Qomplainerz
  CSS clip path Qomplainerz 0 390 07-26-2023, 07:38 PM
Last Post: Qomplainerz
  CSS Feature Queries Qomplainerz 0 342 07-26-2023, 07:05 PM
Last Post: Qomplainerz

Forum Jump:


Users browsing this thread: 3 Guest(s)