HTML-CSS: Responsive image mosaic

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

HTML-CSS : Exercise-34 with Solution

Using HTML, CSS creates a responsive image mosaic.

Use display: grid to create an appropriate responsive grid layout.
Use grid-row: span 2 / auto and grid-column: span 2 / auto to create items that span two rows or two columns respectively.
Wrap the previous styles into a media query to avoid applying on small screen sizes.

HTML Code:

<!-- License: https://bit.ly/3GjrtVF --><!-- Indicates the license information for the code -->
<!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 responsive image mosaic.</title><!-- Sets the title of the document -->
</head><!-- End of the head section -->
<body><!-- Contains the content of the HTML document -->
<div class="image-mosaic"><!-- Creates a container for the image mosaic -->
<div class="card card-tall card-wide" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-1.jpeg')"></div><!-- Creates a card element with a tall and wide aspect ratio, displaying the first flower image -->
<div class="card card-tall" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-2.jpeg')"></div><!-- Creates a card element with a tall aspect ratio, displaying the second flower image -->
<div class="card" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-3.jpeg')"></div><!-- Creates a card element displaying the third flower image -->
<div class="card" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-4.jpeg')"></div><!-- Creates a card element displaying the fourth flower image -->
<div class="card" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-5.jpeg')"></div><!-- Creates a card element displaying the fifth flower image -->
<div class="card" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-6.jpeg')"></div><!-- Creates a card element displaying the sixth flower image -->
<div class="card card-wide" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-1.jpeg')"></div><!-- Creates a card element with a wide aspect ratio, displaying the first flower image again -->
<div class="card" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-2.jpeg')"></div><!-- Creates a card element displaying the second flower image again -->
<div class="card" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-3.jpeg')"></div><!-- Creates a card element displaying the third flower image again -->
<div class="card" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-4.jpeg')"></div><!-- Creates a card element displaying the fourth flower image again -->
<div class="card" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-5.jpeg')"></div><!-- Creates a card element displaying the fifth flower image again -->
<div class="card" style="background-image: url('https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-6.jpeg')"></div><!-- Creates a card element displaying the sixth flower image again -->
</div><!-- End of the image mosaic container -->
</body><!-- End of the body section -->
</html><!-- End of the HTML document -->

Explanation:

The DOCTYPE declaration specifies the document type and version of HTML being used.
The <html> element marks the beginning of the HTML document.
The <head> section contains meta-information about the HTML document.
The <meta charset="utf-8"> tag specifies the character encoding for the document.
The <meta name="viewport" content="width=device-width"> tag sets the viewport width to the width of the device, ensuring proper rendering on various screen sizes.
The <title> tag sets the title of the document, which appears in the browser tab.
The <body> tag contains the content of the HTML document.
The <div class="image-mosaic"> creates a container for the image mosaic.
Inside the container, there are several <div> elements with the class "card" and additional classes for styling. Each <div> represents an image card with a background image sourced from external URLs.

CSS Code:

.image-mosaic {
  display: grid; /* Specifies that the container should be displayed as a grid */
  gap: 1rem; /* Sets the gap between grid items */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Defines the number and size of the columns in the grid */
  grid-auto-rows: 240px; /* Sets the height of rows that don't have an explicit size */
}

.card {
  display: flex; /* Specifies that the card should be displayed as a flex container */
  flex-direction: column; /* Sets the main axis direction to be vertical */
  justify-content: center; /* Aligns content along the main axis */
  align-items: center; /* Aligns content along the cross axis */
  background: #353535; /* Sets the background color of the card */
  font-size: 3rem; /* Sets the font size of the content inside the card */
  color: #fff; /* Sets the text color */
  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem; /* Applies a box shadow effect to the card */
  height: 100%; /* Sets the height of the card to 100% of its container */
  width: 100%; /* Sets the width of the card to 100% of its container */
  border-radius: 4px; /* Applies rounded corners to the card */
  transition: all 500ms; /* Sets the transition effect for all properties over 500 milliseconds */
  overflow: hidden; /* Specifies that any content overflowing the card should be hidden */
  background-size: cover; /* Specifies that the background image should cover the entire card */
  background-position: center; /* Specifies the position of the background image */
  background-repeat: no-repeat; /* Specifies that the background image should not be repeated */
  padding: 0; /* Removes padding */
  margin: 0; /* Removes margin */
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto; /* Spans two rows for cards with the class "card-tall" */
  }

  .card-wide {
    grid-column: span 2 / auto; /* Spans two columns for cards with the class "card-wide" */
  }
}

Explanation:

The .image-mosaic class defines styles for the container that holds the image cards.
The .card class defines styles for the individual image cards.
Inside the .image-mosaic class, display: grid; creates a grid layout for the container, and grid-template-columns defines the size of the columns in the grid.
The .card class sets styles for each card, including background color, font size, box shadow, and sizing.
Media queries are used to adjust the layout for screens with a minimum width of 600px. Cards with the class .card-tall span two rows, and cards with the class .card-wide span two columns.

HTML-CSS Editor:

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