Tips for building complex layouts using css grid! (worth collecting)-CSS Tutorial-php.cn

Tips for building complex layouts using css grid! (worth collecting)

(Recommended tutorial: CSS Tutorial)

Grid layout is a modern CSS One of the most powerful features. Using grid layout helps us build complex, fast layouts without any external UI framework. In this article, we’ll cover everything we need to know about CSS Grid.

Basic knowledge of CSS grid

We go directly to the code, as shown below, first write some tags, the source code is in this link: https://codepen.io/Shadid/pen/ zYqNvgv

<p>
  <header>Header</header>
  <aside>Aside 1</aside>
  <section>Section</section>
  <aside>Aside 2</aside>
  <footer>Footer</footer>
</p>

Copy after login

Above, we created a header, two aside and a footer elements and wrapped them in a container element. We add a background color and font size to all elements within the container element.

.container > * {
  background: aquamarine;
  font-size: 30px;
}

Copy after login

The running web page is as follows:

Tips for building complex layouts using css grid! (worth collecting)

Now we add some grid properties:

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"
}

/* Assign grid areas to elements */
header {
  grid-area: header;
}

aside:nth-of-type(1) {
  grid-area: aside-1;
}

aside:nth-of-type(2) {
  grid-area: aside-2;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

Copy after login

First, we define display:grid, which will enable grid layout, and then we use grid-gap to add gaps in the grid elements.

Next, we assigned a grid area name to each html element. In the container class, we can use the grid-template-areas` attribute to define the appearance of the html template. Pay attention to how the grid template areas are arranged.

grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"

Copy after login

The order of elements is different from the dom structure. However, it is ultimately presented in the order of our network regions.

Tips for building complex layouts using css grid! (worth collecting)

The next step is to make our page responsive. We want to use a different layout on a larger screen. CSS Grid makes it very easy to handle media queries and create responsive layouts. Look at the code below:

@media (min-width: 670px) {
  .container {
    grid-template-areas: 
      "header  header  header"
      "aside-1 section  aside-2"
      "footer    footer    footer"
  }
}

Copy after login

All we have to do is reorder the grid template areas in the media query.

Tips for building complex layouts using css grid! (worth collecting)

Grid columns and rows

How to use CSS grid to organize columns and rows? Start with the following code:

<p>
  </p><p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>

Copy after login

Add some basic css

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
}

.item {
  background: lightcoral;
}

Copy after login

We used a grid layout for the dom structure above and added it using grid-gap space between styles. Now, we use the grid-template-columns property to add some columns.

.container {
    display: grid;
    height: 100vh;
    grid-gap: 10px;
    grid-template-columns: 100px 200px auto auto;
}

Copy after login

Just like this, we used columns. We specify the first column as 100px and the second column as 200px. Since we applied auto in columns 3 and 4, the remaining screen length will be split in half there.

Tips for building complex layouts using css grid! (worth collecting)

You can see that there is a blank space in the page now. What if I want to move sixth column to third column and fourth column? For this we can use the grid-column-start and grid-column-end properties.

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: 5;
}

Copy after login

Note that we use grid-column-end: 5, with the value 5 pointing to the column line. The fourth column ends in the fifth row of the grid. The grid-column-start and grid-column-end values refer to the grid lines.

If you find the grid line values confusing, you can also use span, which will have the same effect as above:

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: span 2;
}

Copy after login

For span 2 , specifies that p occupies two slots in the grid. Now, suppose you want to expand the second column to fill the empty space below. We can also do this easily via the grid-column-start attribute.

.item:nth-of-type(2) {
  grid-row-start: span 2;
}

Copy after login

We use span and grid-row-start to specify that we want to occupy two slots.

Tips for building complex layouts using css grid! (worth collecting)

As you can see above, we have been able to build very complex layouts using a small number of CSS grid properties.

Using grid-templates effectively

Now let’s take a look at grid-templates, in this section we will discuss how to create different layouts for different screen sizes .

First of all, let’s start with a dom structure:

<p>
  <header>header</header>
  <aside>Left</aside>
  <section>Section</section>
  <aside>Right</aside>
  <footer>Footer</footer>
</p>

Copy after login

Then, add some styles:

``
.container {
 display: grid;
 height: 100vh;
 grid-gap: 10px;
}
.container > * {
 background: coral;
 display: flex;
 justify-content: center;
 align-items: center;
}`
``

Copy after login

We added a background color to the element. As you can see from the above code, we also use the flex attribute. We can combine flex and grid together. In this particular example, we center align the content using the flex property.

Tips for building complex layouts using css grid! (worth collecting)

对于移动端，我们希望section在header下面，right 在 section 下面，我们可以使用网格区域来完成。首先，我们定义网格区域：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
   "header"
    "section"
    "right"
    "left"
    "footer"
}

aside:nth-of-type(1) {
  grid-area: left;
}

aside:nth-of-type(2) {
  grid-area: right;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

header {
  grid-area: header;
}

Copy after login

在 grid-template-areas 中可以看到，我们先有header ，然后是section，然后是right，最后是left。此外，我们希望我们的section比 left 和 right都大点。为了实现这一点，我们可以使用rid-template-rows 属性

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
    "header"
    "section"
    "right"
    "left"
    "footer";
  grid-template-rows: 1fr 6fr 2fr 2fr 1fr;
}

Copy after login

Tips for building complex layouts using css grid! (worth collecting)

我们可以根据需要设置移动端的视图，接下我们使用媒体查询来适配一下大屏幕：

@media (min-width: 500px)  {
  .container {
    grid-template-areas: 
      "header header  header"
      "left   section right"
      "footer footer  right";
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-columns: 1fr 6fr 1fr;
  }
}

Copy after login

如何使用`minmax`函数动态跟踪元素的大小

假设我们有两列，它们均匀地占据了屏幕上的可用空间。通过使用 grid-template-columns，我们可以很容易地做到这一点。但是，如果我们想要其中一个在200px到500px之间呢?我们的列可以适应不同的屏幕尺寸，但其中一个永远不会大于500px或小于200px。

对于这些类型的场景，我们使用minmax函数。让我们来看看它的实际效果。

<p class="container">
  <p class="one">One</p>
  <p class="two">Two</p>
</p>

Copy after login

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {
  background: cyan;
}
.two {
  background: pink;
}

Copy after login

在这个例子中，第一列总是在200px到500px之间。然而，第二列的最小值可以是100px，对于更大的屏幕，它将覆盖屏幕的其余部分。

如何使用 repeat 函数？

我们讨论一下元素中的重复模式。我们如何处理它们?我们可以重复我们的代码或使用javascript。不过，还有另一种方法可以用css来实现。repeat函数表示轨道列表的一个重复片段，允许以更紧凑的形式编写显示重复模式的大量列或行。

<p id="container">
  <p>
    This item is 50 pixels wide.
  </p>
  <p>
    Item with flexible width.
  </p>
  <p>
    This item is 50 pixels wide.
  </p>
  <p>
    Item with flexible width.
  </p>
  <p>
    Inflexible item of 100 pixels width.
  </p>
</p>

Copy after login

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > p {
  background-color: #8ca0ff;
  padding: 5px;
}

Copy after login

Tips for building complex layouts using css grid! (worth collecting)

嵌套网格

我还可以将网格嵌套在另一个网格中，来看看如何实现这一点：

<p class="container">
  <p class="item">One</p>
  <p class="item">Two</p>
  <p class="item">Three</p>
  <p class="item inner-grid">
    <p class="item">i</p>
    <p class="item">ii</p>
    <p class="item">iii</p>
    <p class="item">iv</p>
    <p class="item">v</p>
    <p class="item">vi</p>
  </p>
  <p class="item">Five</p>
  <p class="item">Six</p>
</p>

Copy after login

我们首先在外部container上声明网格：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}

Copy after login

注意，我们在网格模板中有一个repeat函数，并将其与一个minmax函数组合在一起。我们现在也可以将网格属性应用到内部网格。

.inner-grid {
  display: grid;
  background: white;
  height: 100%;
  grid-gap: 5px;
  grid-template-columns: repeat(3, auto);
}

Copy after login

这样，我们网格中嵌套了一个网格。

Tips for building complex layouts using css grid! (worth collecting)

今天就跟大家分享到这里，感谢大家的观看，我们下期再见！

原文地址：https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/

作者：Shadid Haque

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Tips for building complex layouts using css grid! (worth collecting). For more information, please follow other related articles on the PHP Chinese website!