Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Grid Masonry Layout
#1
Description:

CSS Grid can be used to create a masonry layout, where items are arranged in columns with varying heights to create an asymmetrical grid.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Masonry Layout Example</title>
  <style>
    .masonry-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 10px;
    }
    .masonry-item {
      background-color: lightblue;
      padding: 10px;
    }
    .item1 {
      grid-row-end: span 2; /* This item will span 2 rows */
    }
    .item3 {
      grid-row-end: span 3; /* This item will span 3 rows */
    }
  </style>
</head>
<body>
  <div class="masonry-container">
    <div class="masonry-item item1">1<br>First item</div>
    <div class="masonry-item">2<br>Second item</div>
    <div class="masonry-item item3">3<br>Third item</div>
    <div class="masonry-item">4<br>Fourth item</div>
    <div class="masonry-item">5<br>Fifth item</div>
    <!-- Add more items here -->
  </div>
</body>
</html>

Explanation:

In this example, the .masonry-container creates a masonry layout using CSS Grid. The grid-template-columns property with repeat(auto-fit, minmax(200px, 1fr)) creates flexible columns that adjust according to the available space, with a minimum of 200px and a maximum of 1fr (equal share of the available space). The .masonry-item divs have varying heights and are arranged in columns, creating a masonry-style layout.

These additional examples showcase more advanced and lesser-known CSS3 features that can be applied creatively to enhance your web designs. As with any new feature, it's essential to check for browser support and consider fallbacks for older browsers if necessary. CSS3 continues to evolve, so keep exploring and experimenting to create cutting-edge web designs.
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 Custom Scrollbar Styles (Webkit and Firefox) Qomplainerz 0 433 07-26-2023, 07:52 PM
Last Post: Qomplainerz
  CSS Box Decoration Break Qomplainerz 0 377 07-26-2023, 07:49 PM
Last Post: Qomplainerz
  CSS Conic Gradients for Circular Progress Bar Qomplainerz 0 358 07-26-2023, 07:48 PM
Last Post: Qomplainerz
  CSS Grid Subgrid Qomplainerz 0 366 07-26-2023, 07:46 PM
Last Post: Qomplainerz
  CSS Variable Fonts Animation Qomplainerz 0 362 07-26-2023, 07:44 PM
Last Post: Qomplainerz
  CSS Scrollbar Styling Qomplainerz 0 370 07-26-2023, 07:43 PM
Last Post: Qomplainerz
  CSS Grid Auto-fit and Minmax Qomplainerz 0 348 07-26-2023, 07:41 PM
Last Post: Qomplainerz
  CSS clip path Qomplainerz 0 376 07-26-2023, 07:38 PM
Last Post: Qomplainerz
  Multi-column layout in CSS3 Qomplainerz 0 359 07-26-2023, 07:23 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: 6 Guest(s)