w3resource

HTML-CSS: Responsive image mosaic

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.


What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.