HTML-CSS: Masonry Layout

Last update on March 08 2024 13:35:19 (UTC/GMT +8 hours)

HTML-CSS : Exercise-40 with Solution

Using HTML, CSS creates a masonry-style layout that is especially useful when working with images.

Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed width (vertical layout) or a fixed height (horizontal layout), forming a perfect fit. Especially useful when working with images.
Define .masonry-container This is the container for the masonry layout and .masonry-columns, an inner container in which .masonry-brick elements will be placed.
Apply display: block to .masonry-brick elements to allow the layout to flow properly.
Use the :first-child pseudo-element selector to apply a different margin for the first element to account for its positioning.
Use CSS variables and media queries for greater flexibility and responsiveness.

HTML Code:

<!--License: https://bit.ly/3GjrtVF-->
<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Indicates the start of the HTML document -->
<head><!-- Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Sets the viewport width to the width of the device -->
<title>Using HTML, CSS creates a masonry-style layout that is especially useful when working with images</title><!-- Sets the title of the document -->
</head><!-- End of the head section -->
<body><!-- Contains the content of the HTML document -->
<div class="masonry-container"><!-- Container for the masonry layout -->
<div class="masonry-columns"><!-- Container for the columns of the masonry layout -->
<img <!-- Image element -->
      class="masonry-brick" <!-- Class for each image brick in the masonry layout -->
      src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-10.jpeg" <!-- Source of the image -->
      alt="An image" <!-- Alternative text for the image -->
    />
<img <!-- Image element -->
      class="masonry-brick" <!-- Class for each image brick in the masonry layout -->
      src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-11.jpeg" <!-- Source of the image -->
      alt="Another image" <!-- Alternative text for the image -->
    />
<img <!-- Image element -->
      class="masonry-brick" <!-- Class for each image brick in the masonry layout -->
      src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-12.jpeg" <!-- Source of the image -->
      alt="Another image" <!-- Alternative text for the image -->
    />
<img <!-- Image element -->
      class="masonry-brick" <!-- Class for each image brick in the masonry layout -->
      src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-13.jpeg" <!-- Source of the image -->
      alt="One more image" <!-- Alternative text for the image -->
    />
<img <!-- Image element -->
      class="masonry-brick" <!-- Class for each image brick in the masonry layout -->
      src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-14.jpeg" <!-- Source of the image -->
      alt="And another one" <!-- Alternative text for the image -->
    />
<img <!-- Image element -->
      class="masonry-brick" <!-- Class for each image brick in the masonry layout -->
      src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-15.jpeg" <!-- Source of the image -->
      alt="Last one" <!-- Alternative text for the image -->
    />
</div>
</div>
</body>
</html><!-- End of the HTML document -->

Explanation:

HTML:

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: Indicates the start of the HTML document.
<head>: Contains meta-information about the HTML document.
<meta charset="utf-8">: Declares the character encoding for the document.
<meta name="viewport" content="width=device-width">: Sets the viewport width to the width of the device.
<title>: Sets the title of the document.
<body>: Contains the content of the HTML document.
<div class="masonry-container">: Container for the masonry layout.
<div class="masonry-columns">: Container for the columns of the masonry layout.
<img>: Image element.
class="masonry-brick": Class for each image brick in the masonry layout.
src="...": Source of the image.
alt="...": Alternative text for the image.

CSS Code:

/* Container */
.masonry-container {
  --column-count-small: 1; /* Defines the number of columns for small screens */
  --column-count-medium: 2; /* Defines the number of columns for medium screens */
  --column-count-large: 3; /* Defines the number of columns for large screens */
  --column-gap: 0.125rem; /* Defines the gap between columns */
  padding: var(--column-gap); /* Adds padding to the container */
}

/* Columns */
.masonry-columns {
  column-gap: var(--column-gap); /* Sets the gap between columns */
  column-count: var(--column-count-small); /* Sets the number of columns for small screens */
  column-width: calc(1 / var(--column-count-small) * 100%); /* Calculates the width of each column */
}

@media only screen and (min-width: 640px) {
  .masonry-columns {
    column-count: var(--column-count-medium); /* Sets the number of columns for medium screens */
    column-width: calc(1 / var(--column-count-medium) * 100%); /* Calculates the width of each column */
  }
}

@media only screen and (min-width: 800px) {
  .masonry-columns {
    column-count: var(--column-count-large); /* Sets the number of columns for large screens */
    column-width: calc(1 / var(--column-count-large) * 100%); /* Calculates the width of each column */
  }
}

/* Bricks */
.masonry-brick {
  width: 100%; /* Sets the width of each brick to 100% */
  height: auto; /* Allows the height to adjust automatically based on content */
  margin: var(--column-gap) 0; /* Sets the margin around each brick */
  display: block; /* Displays each brick as a block-level element */
}

.masonry-brick:first-child {
  margin: 0 0 var(--column-gap); /* Adjusts the margin for the first brick */
}

Explanation:

CSS:

.masonry-container: Styles for the container of the masonry layout.

--column-count-small: Defines the number of columns for small screens.
--column-count-medium: Defines the number of columns for medium screens.
--column-count-large: Defines the number of columns for large screens.
--column-gap: Defines the gap between columns.
padding: Adds padding to the container.

.masonry-columns: Styles for the columns of the masonry layout.

column-gap: Sets the gap between columns.
column-count: Sets the number of columns for different screen sizes using CSS variables.
column-width: Calculates the width of each column based on the number of columns.

.masonry-brick: Styles for the bricks (individual items) in the masonry layout.

width: Sets the width of each brick to 100%.
height: Allows the height to adjust automatically based on content.
margin: Sets the margin around each brick using the defined column gap.
display: Displays each brick as a block-level element.

.masonry-brick:first-child: Styles for the first brick.

Adjusts the margin to remove top margin for the first brick and add bottom margin to maintain the gap between bricks.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.