css网格_更多CSS网格组件模式

css网格

CSS Grid has changed the way we think about layout on the web. Components have changed the way write code for the web. Put them together they are better than peanut butter and chocolate. In a previous post, I went over the two patterns you can use when building layout components with CSS Grid: The Stack and The Split components. In this post, we will be going into two more layout components using CSS Grid

CSS Grid改变了我们对Web布局的思考方式。 组件已经改变了编写网络代码的方式。 将它们放在一起比花生酱和巧克力更好。 在上一篇文章中，我介绍了使用CSS Grid构建布局组件时可以使用的两种模式 ：Stack和Split组件。 在本文中，我们将使用CSS Grid进一步介绍两个布局组件

列和列组件 (The Columns and The Column Component)

One of the longest-standing traditions in CSS frameworks is the concept of a twelve column grid. It opened up the world to a real, non-document flow-based layout. So intuitively might want to replicate that pattern using CSS Grid. This can easily be achieved with two components: the Columns and the Column component.

CSS框架中最悠久的传统之一是十二列网格的概念。 它为真实的，非文档流式的布局打开了世界。 因此，直观上可能要使用CSS Grid复制该模式。 这可以通过两个组件轻松实现：列和列组件。

In the previous article, we learned about how to make two columns in the Split component supplying two CSS length values to the grid-template-columns property. So we could simply use that same logic and write something like this:

在上一篇文章中，我们了解了如何在Split组件中创建两列，从而为grid-template-columns属性提供了两个CSS长度值。 因此，我们可以简单地使用相同的逻辑并编写如下代码：

const Columns = styled.div`
   display: grid;
   gap: 1rem;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
`<Columns>
  {/* content here */}
</Columns>

The above code does work, but luckily a new CSS function was added to improve the developer experience, specifically the repeat function. The repeat function takes two values. The first value is the number of times you want to repeat a CSS length value and the second is the length value you want to repeat. So we can rewrite the above code like this:

上面的代码确实有效，但是幸运的是，添加了新CSS函数来改善开发人员的体验，特别是repeat函数。 repeat功能采用两个值。 第一个值是您要重复CSS长度值的次数，第二个值是您要重复的长度值。 所以我们可以这样重写上面的代码：

const Columns = styled.div`
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(12, 1fr);
`
<Columns>
  {/* content here */}
</Columns>

The good thing about our Columns component is that we are no longer bound to just 12 columns. We can have a 5 column layout or a 21 column layout or any number of columns. All we need to do is add a columns prop where we can specify how many columns we want, like this:

关于Columns组件的好处是我们不再局限于12列。 我们可以有5列布局或21列布局或任意数量的列。 我们需要做的就是添加一个column属性，在其中可以指定所需的列数，如下所示：

const Columns = styled.div`
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(${props=>props.columns}, 1fr);
`
<Columns columns={5}>
  {/* content here */}
</Columns>

It’s good and all to have N columns, but often one needs to span more than one column. That is where the Column component comes in. With this component, we can take advantage of another CSS Grid property called the grid-column property.

最好有N列，但通常一列需要跨越不止一列。 这就是Column组件出现的地方。有了这个组件，我们可以利用另一个CSS Grid属性，称为grid-column属性。

Unlike the other properties that we discussed, the grid-column property is used on grid-items and not on grid-containers. There is complete documentation on the property at MDN but simply put, the property allows you to define the size and location of a grid-item.

与我们讨论的其他属性不同， grid-column属性用于网格项而不是网格容器。 在MDN上有关于该属性的完整文档，但简单地说，该属性使您可以定义网格项的大小和位置。

There are a few ways to do that, but for our purposes, we are looking to define how many columns our item spans and to do that we pair the grid-column property with the span keyword to define how many columns our item will span. To make a column span 3 columns we write our component like this:

有几种方法可以做到这一点，但是出于我们的目的，我们希望定义项目跨越多少列，并通过将grid-column属性与span关键字配对来定义项目跨越多少列。 为了使一个列跨越3列，我们编写这样的组件：

const Columns = styled.div`
  grid-columns: span 3;
`

Now, of course, we don’t want to hard code our Column component span 3 columns so let us make it more dynamic:

现在，当然，我们不想对跨三列的Column组件进行硬编码，因此让我们使其更具动态性：

const Columns = styled.div`
  grid-columns: span ${props=>props.span};
`

And now we can use them together like this:

现在我们可以像这样一起使用它们：

<Columns columns={5}>
  <LeftNav/>
  <Column span={3}>
    <Main/>
  </Column> 
 <SideBar/>
</Columns>

Now we can have the flexibility to create the column layout we need, without being forced to bring in a heavy 12-column grid system. There is one more pattern that CSS Grid can give you, but that will need to be for another day.

现在，我们可以灵活地创建所需的列布局，而不必强行引入笨重的12列网格系统。 CSS Grid可以为您提供另外一种模式，但这需要再等一天。

As I have mentioned before, I have built a layout component library over at bedrock-layout.dev. There you will find several layout components, including the two above components. I would be very grateful if you would check them out and help me improve them.

如前所述，我已经在bedrock-layout.dev上构建了一个布局组件库。 在那里，您将找到几个布局组件，包括上面的两个组件。 如果您能检查出它们并帮助我改善它们，我将不胜感激。

翻译自: https://medium.com/the-non-traditional-developer/more-css-grid-component-patterns-60d1603fcf75

css网格