Suck the cat with code! This article is participating in [Cat essay Activity]

🌊 author’s home page: Haichong 🌊 Author Profile: 🥇HDZ core group member, 🏆 full stack quality creator, 🌊 has been ranked top ten in the weekly list of C station for a second year. Fan welfare: Send four books to fans every week (each one has), and send various small gifts every month (gold boring enamelware cup, pillow, mouse pad, mug, etc.)

In this article, I’ll show you how to create a responsive cat gallery using HTML and CSS code. Earlier I also made a responsive and filterable game + tools display page using HTML, CSS, and JS.

We’ll see galleries like this on some wallpaper sites. Many types of images are neatly arranged together. This type of design is most commonly used on personal websites or image download sites. If you want to know what a responsive cat photo gallery is, let me tell you.

Responsive is a very popular word in web design. As a responsive design, users of any screen size can use it. This means that in the case of any device, the design can adjust itself to the screen size of that device.

I’ve provided a live demo below to help you understand how this gallery works.

Haiyong. Site/maomaotupia…

Hopefully the demo above has helped you figure out how it works. The most important thing about this design is that you can use different sizes of images here.

As you can see above, this responsive cat photo gallery comes in a variety of sizes. Some images are large in size, some are small, and some are long. In other words, the image size here is random. It’s a complete response. Whenever you use the slider on a small device, you can see the image in the column.

How to create a responsive image library using HTML and CSS

Now I’m the one creating a responsive cat gallery. First, you need to create an HTML and CSS file. Open the editor on your device to create the HTML file. Below I present the HTML and CSS code that you can copy and paste to use.

Step 1: Add the image using the following HTML code

I found some cat pictures from Pinterest, and here’s the basic HTML structure of the gallery

<div id="gallery" class="container-fluid">
	<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-1.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-2.jpg" class="img-responsive">	
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-3.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-4.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-5.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-6.jpg" class="img-responsive">	
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-7.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-8.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-9.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-10.jpg" class="img-responsive">
        <! -- Omit 100 million cat pictures -->
</div>
Copy the code

Part of the picture is as follows

Step 2: Design your gallery using CSS code

I designed it using the CSS code below. In this case, you don’t need to use too much CSS code. I just use CSS code to sort the images and do some basic design. column-count:6; Divide the image into up to 6 columns.

I also put a distance of 20px in the middle of each column. As a result, the image looks a bit blank. You can copy the CSS code and paste it into your CSS file. Or add the code to an HTML file using the style tag.

#gallery{
  column-count:6;
  column-gap:20px;
}
    
#gallery img {
  width:100%;
  height:auto;
  margin: 4% auto;
  box-shadow: -3px 5px 15px # 000;
  cursor: pointer;
  transition: all 0.2 s;
}
Copy the code

Step 3: Make the image slider responsive

I used the following code to make it fully responsive. Since I’m responding via CSS, I used @Media to determine how to view these images for different skins. If you build this slider using Bootstrap, you don’t need to use a separate CSS code to make it responsive. You can copy this code and add it to your CSS file.

@media (max-width:1200px) {#gallery{
      column-count:4;
      column-gap:20px; }}@media (max-width:800px) {#gallery{
      column-count:3;
      column-gap:20px; }}@media (max-width:600px) {#gallery{
      column-count:2; }}Copy the code

We’re done here. How about that? Easy

Write it at the end

The author is determined to build a fishing site with 100 small games, update progress: 40/100

I’ve been writing tech blogs for a long time, mostly through Nuggets, and this is my post on creating a responsive cat gallery using HTML and CSS. I like to share technology and happiness through articles. You can visit my blog at juejin.cn/user/204034… For more information. Hope you like it! 😊

💌 welcomes your comments and suggestions in the comments section! 💌