Create Your Own Gallery
Let's create a gallery that includes images, videos, and audio files you like.
First, let's create a gallery section using the <section>
tag.
Creating a Gallery Section
The HTML code below defines the title and content of the gallery section.
Gallery Section
<section id="gallery" class="container"> <div class="content-text"> <h2>Gallery</h2> <p>These are the things I like</p> </div> <div class="gallery"></div> </section>
We used the h2
tag for the title and the p
tag for the subtitle.
The container
class and content-text
class have been used previously, while the gallery class is newly defined.
The .gallery
class that makes up the gallery section uses a Grid layout.
Unlike Flex, which utilizes a single horizontal or vertical axis, Grid is a layout system that utilizes both horizontal and vertical directions.
Let's learn more about Grid starting now!
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help