Responsive layouts are those that can work with different viewport sizes. A viewport is the size of a phone, table, or screen used to view web pages. These screens come in various sizes.
The table below summarizes the width and height of different device screens. This is not a complete list.
Device
Width
Height
Laptop
1440px
900px
Tablet
1776px
1024px
Desktop
1920px
1080px
When creating layouts, we must consider how they would appear on another device. On a laptop, we could show four images across, but on a mobile device, we could only show one image per row.
The Chrome browser has tools to help you see how a web page would look on different devices. To activate the Responsive layout, open the Inspector and then click on "Toggle Device Toolbar."
Code for Row Wrap
In this example, the images and titles are coded in HTML, and the items are in an unordered list. The ullist-style Is set to none to remove the bullet points that are rendered by default for list items.
We can view the pattern for a gallery schematically composed of list items.
Code for Column Wrap
In this example, the images and titles are coded using div containers. There are 3 column containers containing three images and their titles for nine images. It's good to look at this code and identify the pattern because it is repetitious. Once we see the pattern, we can use this code.
/* By default, we will render the images in a single column. This
is what we see in the mobile view. */
.image-gallery {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Within each "column" div, we render a column.
The selector here lists two classes, so it applies to any container that is
a column within an image gallery.
*/
.image-gallery .column {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Media queries are used to supply CSS to be applied to
specific size screens.
This code applies only to screens as big or bigger as a tablet.
*/
@media only screen and (min-width: 768px) {
.image-gallery {
flex-direction: row;
}
}
