css grid_如何使用CSS Grid创建图片库

闻鹤龄

2023-12-01

css grid

Image galleries made by websites like Unsplash, Pinterest Etc, are made by techniques like positioning or translating the image item which is a very cumbersome task to do. You can achieve the same functionality very quickly using CSS Grids.

由Unsplash ， Pinterest Etc等网站制作的图像库是通过定位或翻译图像项等技术来制作的，这是一项非常繁琐的任务。您可以使用CSS Grids快速实现相同的功能。

For example: Above is a gallery of images with images of varying width and height which is a perfect use case for CSS grids.

例如：上面是一个图像库，其中图像的宽度和高度都不同，这是CSS网格的完美用例。

让我们开始吧！ (Let’s get started!)

底层网格 (The Underlying Grid)

Now, let’s create an 8x8 grid. We can create a grid of other sizes also but that depends on the type of gallery you want. In our case, an 8x8 grid will be ideal.

现在，让我们创建一个8x8网格 。我们还可以创建其他尺寸的网格，但这取决于您想要的画廊的类型。在我们的情况下，理想的是8x8的网格 。

A grid container is defined by setting an element’s display property to the grid. So, the div, with the class grid is going to be our grid container.
网格容器由一个元件的显示属性设置为网格定义。因此，具有类grid的div将成为我们的网格 容器。
We use the grid-template-columns property to set the column tracks and grid-template-rows to set the row tracks. We declare these properties on the grid container. In our example, we will we be making an 8x8 grid container.
我们使用grid-template-columns属性设置列轨道，并使用grid-template-rows设置行轨道。 我们在网格容器上声明这些属性。在我们的示例中，我们将制作一个8x8网格容器。
grid-gap: It defines the size of the gap between rows and columns in a grid layout. The value for grid gap can be any CSS length unit. In our example, I have given the value of 15px to make our grid look better.
grid-gap：定义网格布局中行和列之间的间隙大小。网格间隙的值可以是任何CSS长度单位。在我们的示例中，我给了15px的值以使我们的网格看起来 更好。

HTML:

HTML：

<div class="gallery"></div>

CSS:

CSS：

.gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 15px;
}

Note: The height of the rows is tied to the viewport width, so that the cells maintain its aspect ratio perfectly fine. We have 8 rows each with the height of 5 viewport width. I experimented with these heights and came to the conclusion that 5% of viewport width is the perfect size for the height. We are doing this by setting the height of the row to 5vw (viewport width).

注意： 行的高度与视口宽度有关，因此单元格可以保持其精细的长宽比。 我们有8行，每行的高度为5视口宽度 。 我对这些高度进行了实验，得出的结论是， 视口宽度的 5％是该高度的理想尺寸 。 为此，我们将行的高度设置为5vw(视口宽度) 。

Note: All direct children of grid automatically become grid items.

注意： 网格的所有直接子代将自动成为网格项 。

插入网格项目 (Inserting Grid Items)

Now, we will be inserting the grid items inside the grid container:

现在，我们将在网格容器中插入网格项：

<div class=”gallery”>
  <figure class=”gallery__item gallery__item--1">
    <img src="img/image-1.jpg" class="gallery__img" alt="Image 1">
  </figure>
  <figure class="gallery__item gallery__item--2">
    <img src="img/image-2.jpg" class="gallery__img" alt="Image 2">
  </figure>
  <figure class="gallery__item gallery__item--3">
    <img src="img/image-3.jpg" class="gallery__img" alt="Image 3">
  </figure>
  <figure class="gallery__item gallery__item--4">
    <img src="img/image-4.jpg" class="gallery__img" alt="Image 4">
  </figure>
  <figure class="gallery__item gallery__item--5">
    <img src="img/image-5.jpg" class="gallery__img" alt="Image 5">
  </figure>
  <figure class="gallery__item gallery__item--6">
    <img src="img/image-6.jpg" class="gallery__img" alt="Image 6">
  </figure>
</div>

样式图像 (Styling Images)

.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Setting the object fit value to cover is like setting the background size to cover for the background image. We are doing this so the image can fill the height and width of its box (the grid item), maintaining its aspect ratio.

将对象适合值设置为cover就像将背景尺寸设置为背景图像的 cover一样 。我们这样做是为了使图像可以填充其框(网格项)的高度和宽度，并保持其纵横比。

Note: The object fit property only works if we set the width and height properties.

注意： 仅当我们设置width和height属性时，object fit属性才起作用。

Note: By default the grid items are laid out according to the grid auto placement rules.

注意： 默认情况下， 网格项目是根据网格自动放置规则进行布局的 。

定位网格项目 (Positioning Grid Items)

Before we start positioning the grid items, we will study a few basics concepts.

在开始放置网格项之前，我们将学习一些基本概念。

The grid div is the grid container, and all the direct child elements are the grid items. When we defined the grid tracks with grid-template-columns and grid-template-rows, grid provided us numbered lines called the grid lines to use for positioning the items. You can refer to each grid line by a numerical index.

grid div是网格容器 ，所有直接子元素都是网格项 。当我们使用grid-template-columns和grid-template-rows定义网格轨迹时， grid为 我们提供 了编号的线(称为网格线) ，用于放置项目。您可以通过数字索引引用每条网格线。

Columns start at one, from left to right by default, and rows also begin at one from top to bottom. It takes two grid lines to make a single column or row, one line on either side, so our 8-column and 8-row grid consist of 9-column lines and 9-row lines.

列从1开始 ，从默认左到右，和行也开始在一个从上到下 。它需要两条网格线才能形成单列或一行，而在每一侧都需要一条线，因此我们的8列和8行网格由9列线和9行线组成 。

The vertical lines 1 and 2 determine the start and end points of the first column. Lines 2 and 3 the second column and so on. Similarly, horizontal lines 1 and 2 determine the position of the first row, and lines 2 and 3 the second row and so on. Knowing the above concepts will help you understand how we are going to position items (images) on our grid.

垂直线1和2确定第一列的起点和终点。第2行和第3行第二列 ，依此类推。同样，水平线1和2确定了第一行的位置，水平线2和3确定了第二行，依此类推。了解以上概念将帮助您了解我们如何在网格上定位项目(图像) 。

Now, we will use grid line numbers to control how items are placed by applying properties directly to a grid item. We can specify on which line a grid item starts and ends, and how many tracks it should expand.

现在，我们将使用网格线号通过将属性直接应用于网格项目来控制项目的放置方式。我们可以指定网格项目在哪一行开始和结束，以及应该扩展多少条轨道。

第一格项目 (1st Grid Item)

So let’s create a new rule that targets the first grid item. We’ll first use the grid-column-start property to indicate the column grid line where the first grid item starts. The grid-column-end indicates where the first grid item ends.

因此，让我们创建一个针对第一个网格项目的新规则。我们将首先使用grid-column-start属性来指示第一个网格项开始的列网格线。 grid-column-end指示第一个网格项的结束位置。

So the grid-column-start value is a number that indicates the grid line at the left edge of a column. The grid-column-end value indicates the grid line that marks the right edge of the column.

因此，grid-column-start 值是一个数字，指示列左边缘的网格线。 grid-column-end 值指示标记列右边缘的网格线。

So in the example given below, setting grid-column-start to 1 and grid-column-end to 3 means that the grid item will stretch from the left edge of the grid line, line 1 to line 3, filling up 2 columns. We will also use the grid-row-start and grid-row-end properties to indicate the grid item start and end position on the row grid lines in the same way as we did for the column.

因此，在下面给出的示例中，将grid-column-start设置为1并将grid-column-end设置为3意味着网格项将从网格线的左边缘(第1行) 延伸到第3行 ，并填充2列。我们还将使用grid-row-start和grid-row-end属性，以与对列相同的方式在行网格线上指示网格项的开始和结束位置 。

.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

Note: Now, we will position other items on the same principles which we learned above.

注意： 现在，我们将把其他项目置于我们上面学到的相同原理上。

第二格项目 (2nd Grid Item)

.gallery__item--2 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}

第三网格项目 (3rd Grid Item)

.gallery__item--3 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 6;
}

第四格物品 (4th Grid Item)

.gallery__item--4 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 6;
}

第五格 (5th Grid Item)

.gallery__item--5 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 6;
    grid-row-end: 9;
}

第六格 (6th Grid Item)

.gallery__item--6 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 6;
    grid-row-end: 9;
}

You can find the complete code below.

您可以在下面找到完整的代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">

        <title>CSS Grids Gallery</title>
    </head>
    <body>
        <div class="container">
            <div class="gallery">
                <figure class="gallery__item gallery__item--1">
                    <img src="img/image-1.jpg" alt="Gallery image 1" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--2">
                    <img src="img/image-2.jpg" alt="Gallery image 2" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--3">
                    <img src="img/image-3.jpg" alt="Gallery image 3" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--4">
                    <img src="img/image-4.jpg" alt="Gallery image 4" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--5">
                    <img src="img/image-5.jpg" alt="Gallery image 5" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--6">
                    <img src="img/image-6.jpg" alt="Gallery image 6" class="gallery__img">
                </figure>
            </div>
        </div>
    </body>
</html>

And the CSS:

和CSS：

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}

html {
  box-sizing: border-box;
  font-size: 62.5%; 
}

body {
  font-family: "Nunito", sans-serif;
  color: #333;
  font-weight: 300;
  line-height: 1.6; 
}

.container {
  width: 60%;
  margin: 2rem auto; 
}

.gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 1 / span 2; */
}

.gallery__item--2 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;

  /** Alternative Syntax **/
  /* grid-column: 3 / span 2;  */
  /* grid-row: 1 / span 2; */
}

.gallery__item--3 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 6;

  /** Alternative Syntax **/
  /* grid-column: 5 / span 4;
  grid-row: 1 / span 5; */
}

.gallery__item--4 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 6;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;  */
  /* grid-row: 3 / span 3; */
}

.gallery__item--5 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 9;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 6 / span 3; */
}

.gallery__item--6 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 9;

  /** Alternative Syntax **/
  /* grid-column: 5 / span 4; */
  /* grid-row: 6 / span 3; */
}

You can try adding your own CSS to make this gallery look the way you want it to look. You can also create more complex image galleries very easily.

您可以尝试添加自己CSS，以使此库看起来像您想要的样子。您还可以非常轻松地创建更复杂的图像库。

You can learn more about the CSS Grids in the link given below

您可以在下面的链接中了解有关CSS网格的更多信息

A Complete Guide to Grid | CSS-TricksCSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can…css-tricks.com

网格的完整指南 CSS技巧 CSS网格布局是CSS中功能最强大的布局系统。 这是一个二维系统，因此它可以... css-tricks.com

I hope you’ve found this post informative and helpful. I would love to hear your feedback!

希望您发现这篇文章对您有帮助。我希望听到您的反馈！

Thank you for reading!

感谢您的阅读！

翻译自: https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c/