Author: | alnahian2003 |
---|---|
Views Total: | 1,698 views |
Official Page: | Go to website |
Last Update: | December 18, 2020 |
License: | MIT |
Preview:

Description:
Yet another responsive, fluid, masonry layout built using CSS grid layout system.
Aims for providing a quick way to implement a Pinterest-like grid layout on modern web apps using pure CSS/CSS3.
How to use it:
1. The basic HTML structure for the masonry layout.
<section class="masonry"> <div class="masonry-item cell cell-1"> <img src="1.jpg"> </div> <div class="masonry-item cell cell-2"> <img src="2.jpg"> </div> <div class="masonry-item cell cell-3"> <img src="3.jpg"> </div> <div class="masonry-item cell cell-4"> <img src="4.jpg"> </div> <div class="masonry-item cell cell-5"> <img src="5.jpg"> </div> <div class="masonry-item cell cell-6"> <img src="6.jpg"> </div> <div class="masonry-item cell cell-7"> <img src="7.jpg"> </div> <div class="masonry-item cell cell-8"> <img src="8.jpg"> </div> <div class="masonry-item cell cell-9"> <img src="9.jpg"> </div> <div class="masonry-item cell cell-10"> <img src="10.jpg"> </div> <div class="masonry-item cell cell-11"> <img src="11.jpg"> </div> <div class="masonry-item cell cell-12"> <img src="12.jpg"> </div> <div class="masonry-item cell cell-13"> <img src="13.jpg"> </div> <div class="masonry-item cell cell-14"> <img src="14.jpg"> </div> </section>
2. The primary CSS styles for the masonry layout.
.masonry { background-color: #000324; width: 100%; height: 100vh; padding: 1rem; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(14, 1fr); row-gap: 1rem; column-gap: 1rem; } .cell-1 { grid-column: 1 / 6; grid-row: 1 / 6; } .cell-2 { grid-column: 6 / 9; grid-row: 1 / 11; } .cell-3 { grid-column: 9 / 12; grid-row: 1 / 4; } .cell-4 { grid-column: 12 / -1; grid-row: 1 / 4; } .cell-5 { grid-column: 1 / 4; grid-row: 6 / 11; } .cell-6 { grid-column: 4 / 6; grid-row: 6 / 7; } .cell-7 { grid-column: 4 / 6; grid-row: 7 / 11; } .cell-8 { grid-column: 1 / 6; grid-row: 11 / -1; } .cell-9 { grid-column: 6 / 12; grid-row: 11 / -1; } .cell-10 { grid-column: 9 / 12; grid-row: 4 / 11; } .cell-11 { grid-column: 12 / 13; grid-row: 4 / 6; } .cell-12 { grid-column: 13 / -1; grid-row: 4 / 6; } .cell-13 { grid-column: 12 / -1; grid-row: 6 / 13; } .cell-14 { grid-column: 12 / -1; grid-row: 13 / -1; }
3. Make the layout fully responsive.
/* Responsive */ /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .masonry { background-color: white; width: 100%; height: 100vh; padding: 1rem; display: flex; flex-flow: column; } }
4. Auto resize the image to fit the grid item.
img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; pointer-events: none; }