css響應(yīng)式網(wǎng)格布局生成器

TL; DR (TL;DR)

The most popular way to display a collection of similar data is to use tables, but HTML tables have the drawback of being difficult to make responsive.

顯示相似數(shù)據(jù)集合的最流行方法是使用表，但是HTML表具有難以響應(yīng)的缺點(diǎn)。

In this article, I use CSS Grid Layout Module and CSS Properties (and no Javascript) to layout tables that wrap columns depending on screen width, which further changes to a card based on layout for small screens.

在本文中，我將使用CSS網(wǎng)格布局模塊和CSS屬性(而不是Javascript)來布局表，這些表根據(jù)屏幕寬度來包裝列，而這些表格會(huì)根據(jù)小屏幕的布局進(jìn)一步更改為卡片。

For the impatient, look at the following pen for a prototypical implementation.

對(duì)于不耐煩的人，請(qǐng)看下面的筆以作為原型實(shí)現(xiàn)。

響應(yīng)式HTML表的一點(diǎn)歷史 (A Little History of Responsive HTML Tables)

Responsive tables aren’t a new topic, and there are many solutions that have already been proposed. “Responsive Table Data Roundup” first published in 2012 by Chris Coyier, has things summarized very neatly (including a 2018 update).

響應(yīng)表并不是一個(gè)新話題，已經(jīng)提出了許多解決方案。 克里斯·科耶爾(Chris Coyier)于2012年首次發(fā)布了“響應(yīng)表數(shù)據(jù)綜述” ，內(nèi)容總結(jié)得非常整潔(包括2018年更新)。

“Really Responsive Tables using CSS3 Flexbox” by Vasan Subramanian shows an idea of wrapping columns, implemented with Flexbox.

Vasan Subramanian的“使用CSS3 Flexbox的真正響應(yīng)表”展示了使用Flexbox實(shí)現(xiàn)的包裝列的想法。

Even though many interesting ideas have been proposed, libraries like bootstrap opt for horizontal scrolling for small screens.

即使已經(jīng)提出了許多有趣的想法，諸如引導(dǎo)程序之類的庫(kù)仍選擇對(duì)小屏幕進(jìn)行水平滾動(dòng)。

As we now have CSS Grid, I think we could have a better common alternative to horizontal scrolling.

現(xiàn)在我們有了CSS Grid，我認(rèn)為我們可以有一個(gè)更好的通用替代方法來進(jìn)行水平滾動(dòng)。

HTML表格 (HTML Tables)

Starting with the basics, a table in HTML is a layout format for displaying collections of items through a matrix of rows and columns. Items are laid out in rows, with the same data attributes in the same columns, with the rows often sorted with one or more sortable attributes. The format gives you a birds-eye view to quickly grasp and examine large quantities of data.

從基礎(chǔ)開始，HTML表格是一種布局格式，用于通過行和列的矩陣顯示項(xiàng)目的集合。 項(xiàng)目按行排列，在同一列中具有相同的數(shù)據(jù)屬性，并且這些行通常使用一個(gè)或多個(gè)可排序的屬性進(jìn)行排序。 該格式使您可以鳥瞰，以快速掌握和檢查大量數(shù)據(jù)。

For example, here’s a hypothetical table of purchase order details, that you may see in a purchasing application.

例如，這是假設(shè)的采購(gòu)訂單詳細(xì)信息表，您可能會(huì)在采購(gòu)應(yīng)用程序中看到該表。

An item, in this case, is a purchase order detail, that has attributes such as part number, part description, etc.

在這種情況下，物料是采購(gòu)訂單明細(xì)，具有零件編號(hào)，零件描述等屬性。

When using HTML tables, the layout of the data is hardcoded as rows and columns (e.g. <tr> and <td>). This may be sufficient for usage by a screen that fits the whole table width, but in reality, this does not apply for the myriad of devices that exist today. In terms of hacks, you can alter the display property of tables and use any layout you can do with CSS in general, but that doesn’t seem semantically correct.

使用HTML表時(shí)，數(shù)據(jù)的布局被硬編碼為行和列(例如<tr>和<td> )。 對(duì)于適合整個(gè)桌子寬度的屏幕來說，這可能就足夠了，但實(shí)際上，這不適用于當(dāng)今存在的眾多設(shè)備。 就黑客而言，您可以更改表的顯示屬性，并使用通常可以使用CSS進(jìn)行的任何布局，但這在語(yǔ)義上似乎并不正確。

重新定義表(=項(xiàng)目集合) (Tables Redefined (= Collection of Items))

Let’s start by redefining how table data should be expressed in HTML.

讓我們重新定義表數(shù)據(jù)應(yīng)如何以HTML表示。

As stated earlier, since table data is essentially an ordered collection of items, it seems natural to use ordered lists. Also, since tables are often used to supplement textual descriptions, it seems natural to enclose this in a section, but this would depend on the context of how the table data is being used.

如前所述，由于表數(shù)據(jù)本質(zhì)上是項(xiàng)目的有序集合，因此使用有序列表似乎很自然。 另外，由于經(jīng)常使用表格來補(bǔ)充文字說明，因此將其括在一節(jié)中似乎很自然，但這取決于表格數(shù)據(jù)的使用方式。

<section><ol><!-- The first list item is the header of the table --><li><div>#</div><!-- Enclose semantically similar attributes as a div hierarchy --><div><div>Part Number</div><div>Part Description</div></div>...</li><!-- The rest of the items in the list are the actual data --><li><div>1</div><!-- Group part related information--><div><div>100-10001</div><div>Description of part</div></div>...</li>...</ol> </section>

Vanilla <div>'s are used to express item attributes since HTML5 does not define an appropriate tag for this. The key here is to express semantically similar attributes as a hierarchy of <div>'s. This structure will be used when defining how the data should be laid out. I will come back to this in the next section on the topic of styling.

Vanilla <div>用于表示項(xiàng)目屬性，因?yàn)镠TML5并未為此定義適當(dāng)?shù)臉?biāo)簽。 此處的關(guān)鍵是將語(yǔ)義上相似的屬性表示為<div>的層次結(jié)構(gòu)。 在定義數(shù)據(jù)布局方式時(shí)將使用此結(jié)構(gòu)。 我將在下一節(jié)有關(guān)樣式的主題中再次談到這一點(diǎn)。

As for the actual data inside the <div> element, the first item in the list is the header, and the rest of the items are the actual data.

至于<div>元素中的實(shí)際數(shù)據(jù)，列表中的第一項(xiàng)是標(biāo)題，其余項(xiàng)是實(shí)際數(shù)據(jù)。

Now, it’s time to start talking about styling the items with CSS Grid.

現(xiàn)在，該開始討論使用CSS Grid設(shè)置樣式的時(shí)間了。

樣式項(xiàng)集合 (Styling Item Collections)

The basic idea here is to display all attributes of the item as a normal table, display width permitting. This layout has the luxury of being able to see as many items (rows) as possible.

這里的基本思想是在寬度允許的情況下，將項(xiàng)目的所有屬性顯示為普通表。 這種布局的奢華之處在于可以看到盡可能多的項(xiàng)目(行)。

When the width of the display becomes narrower, some attributes are stacked vertically, in order to save horizontal space. The choice of stacking attributes should be based on:

當(dāng)顯示器的寬度變窄時(shí)，一些屬性會(huì)垂直堆疊，以節(jié)省水平空間。 堆疊屬性的選擇應(yīng)基于：

Do the attributes make sense when stacked vertically? and,

垂直堆疊時(shí)這些屬性有意義嗎？ 和，

When stacked vertically, does it save horizontal space?

垂直堆疊時(shí)，是否節(jié)省水平空間？

When the width further shrinks to the size of a mobile device, each item is displayed as a card. This layout has redundancy because the attribute names are repeatedly displayed on each card, and has the least glanceability, but does not compromise usability (e.g. horizontal scrolling, super small text, etc).

當(dāng)寬度進(jìn)一步縮小到移動(dòng)設(shè)備的大小時(shí)，每個(gè)項(xiàng)目都顯示為卡。 這種布局具有冗余性，因?yàn)閷傩悦Q重復(fù)顯示在每張卡上，掃視性最低，但不會(huì)損害可用性(例如，水平滾動(dòng)，超小文本等)。

Now let’s dive into the details.

現(xiàn)在讓我們深入研究細(xì)節(jié)。

樣式步驟1：完整表格 (Styling Step 1: Full Table)

Here’s a visual summary of how things will be implemented with CSS Grid.

這是有關(guān)如何使用CSS Grid實(shí)現(xiàn)事物的直觀總結(jié)。

In order to make columns wrap, multiple grid containers are defined as a hierarchy. The red box is a grid container for each row, and the blue box is a container for each column group that wraps.

為了使列換行，將多個(gè)網(wǎng)格容器定義為一個(gè)層次結(jié)構(gòu)。 紅色框是每一行的網(wǎng)格容器，藍(lán)色框是每個(gè)要包裝的列組的容器。

Let’ s start by setting the list as a grid container by defining a class called .item-container and applying it to the <li>(the red box).

首先，通過定義一個(gè)名為.item-container的類并將其應(yīng)用于<li> (紅色框)，將列表設(shè)置為網(wǎng)格容器。

.item-container {display: grid;grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em; }

The number of explicit columns specified with grid-template-columns is nine, which is the number of top-level <div>'s, directly ?under <li>.

用grid-template-columns columns指定的顯式列的數(shù)目為9，這是直接在<li>下的頂級(jí)<div>的數(shù)目。

The column’s width is defined in relative length to make the columns wrap. The actual fraction has to be fine-tuned, based on the content.

列的寬度以相對(duì)長(zhǎng)度定義，以使列自動(dòng)換行。 實(shí)際分?jǐn)?shù)必須根據(jù)內(nèi)容進(jìn)行微調(diào)。

The columns that don’t wrap are defined in absolute length to maximize width usage for the wrapping columns. In the purchase order details example, the second column is a two-digit Id, so I set the width to double that size of 2 m’s.

不換行的列以絕對(duì)長(zhǎng)度定義，以最大程度地利用換行列的寬度。 在采購(gòu)訂單詳細(xì)信息示例中，第二列是兩位數(shù)的ID，因此我將寬度設(shè)置為2 m的兩倍。

Next, we define another grid container called .attribute-container and apply it on all intermediate <div>’s under the list (the blue box).

接下來，我們定義另一個(gè)名為.attribute-container網(wǎng)格容器，并將其應(yīng)用于列表下方的所有中間<div> (藍(lán)色框)。

.attribute-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));}

The minimum column width for all grid items under .attribute-container is specified with a CSS variable called --column-width-min(more on this later) using the minmax function, with the maximum set to take the rest of the space (e.g. one fraction). Since grid-template-columns are repeated, available horizontal space will be split into the maximum number of columns that could take at least --column-width-min, and the rest of the columns would go to the next line. The column’s width will be stretched if there is excess horizontal space because the repeat is auto-fited.

.attribute-container下所有網(wǎng)格項(xiàng)目的最小列寬是使用minmax函數(shù)通過名為--column-width-minCSS變量指定的(稍后會(huì)詳細(xì)介紹)，最大值設(shè)置為占用其余空間(例如一小部分)。 由于repeat grid-template-columns ，因此可用的水平空間將被劃分為最多可占用--column-width-min的最大列數(shù)，其余列將進(jìn)入下一行。 如果有多余的水平空間，則列的寬度將被拉伸，因?yàn)閞epeat是auto-fit 。

造型步驟2：包裝桌 (Styling Step 2: Wrapping Table)

Next, --column-width-min needs to be specified independently for each column in order to wrap. Just to be clear, the variables need to be specified in order for the full table to render properly as well. To do this, a class is set for each .attribute-container, and a different --column-width-min is specified for each class scope.

接下來，需要為每列分別指定--column-width-min以便進(jìn)行包裝。 為了清楚起見，還需要指定變量，以便完整表也能正確呈現(xiàn)。 為此，為每個(gè).attribute-container設(shè)置一個(gè)類，并為每個(gè)類范圍指定不同的--column-width-min 。

Let’s take a look at the HTML where .part-id is applied,

讓我們看一下應(yīng)用了.part-idHTML，

<div class="attribute-container part-id"><div>Part Number</div><div>Part Description</div> </div>

and the CSS:

和CSS：

.part-id {--column-width-min: 10em; }

This specific grid container will have two columns, as long as the available width is wider than 10em for each grid item (e.g. the grid container is wider than 20em). Once the grid container’s width becomes narrower than 20em, the second grid item will go to the next row.

只要每個(gè)網(wǎng)格項(xiàng)的可用寬度大于10em(例如，網(wǎng)格容器的寬度大于20em)，則此特定的網(wǎng)格容器將具有兩列。 一旦網(wǎng)格容器的寬度變得小于20em，第二個(gè)網(wǎng)格項(xiàng)將轉(zhuǎn)到下一行。

When we combine CSS properties like this, we need only one grid container .attribute-container, with the details changing where the class is applied.

當(dāng)我們像這樣組合CSS屬性時(shí)，我們只需要一個(gè)網(wǎng)格容器.attribute-container ，詳細(xì)信息就會(huì)更改應(yīng)用類的位置。

We can further nest .attribute-containers, to have multiple levels of wrapping with different widths, as in the following exert.

我們可以進(jìn)一步嵌套.attribute-container ，以具有不同寬度的多層包裝，如下文所述。

<div class="attribute-container part-information"><div class="attribute-container part-id"><div class="attribute" data-name="Part Number">Part Number</div><div class="attribute" data-name="Part Description">Part Description</div></div><div class="attribute-container vendor-information"><div class="attribute">Vendor Number</div><div class="attribute">Vendor Name</div></div> </div> .part-information {--column-width-min: 10em; } .part-id {--column-width-min: 10em; } .vendor-information {--column-width-min: 8em; }

All of the above is enclosed in the following media query. The actual breakpoint should be selected based on the width necessary when your table is wrapped to the extreme.

以上所有內(nèi)容都包含在以下媒體查詢中。 實(shí)際斷點(diǎn)應(yīng)根據(jù)將表包裝到最末端時(shí)所需的寬度來選擇。

@media screen and (min-width: 737px) { ... }

樣式三：卡片布局 (Styling Step Three: Card Layout)

The card layout will look like a typical form with attribute names in the first column and attribute values in the second column.

卡片布局看起來像是一種典型的形式，第一列具有屬性名稱，第二列具有屬性值。

To do this, a class called .attribute is defined and applied to all leaf <div> tags under the <li>.

為此，定義了一個(gè)名為.attribute的類，并將其應(yīng)用于<li>下的所有葉子<div>標(biāo)記。

.attribute {display: grid;grid-template-columns: minmax(9em, 30%) 1fr; }

The attribute names are taken from a custom attribute of the leaf ?<div> called data-name, for example <div class=”attribute” data-name="Part Number">, and a pseudo-element is created. The pseudo-element will be subject to the grid container’s layout.

屬性名稱取自名為<div> data-name <div> data-name的葉子<div>的自定義屬性，例如<div class=”attribute” data-name="Part Number"> ，并創(chuàng)建了一個(gè)偽元素。 偽元素將服從網(wǎng)格容器的布局。

.attribute::before {content: attr(data-name); }

The first item in the list is the header and does not need to be displayed.

列表中的第一項(xiàng)是標(biāo)題，不需要顯示。

/* Don't display the first item, since it is used to display the header for tabular layouts*/ .collection-container>li:first-child {display: none; }

And finally, the cards are laid out in one column for mobile devices, but two for screens with a little bit more width, but not enough for displaying a table.

最后，這些卡在移動(dòng)設(shè)備的一列中布局，但在寬度稍大一點(diǎn)的屏幕上卻布局了兩列，但不足以顯示一張桌子。

/* 2 Column Card Layout */ @media screen and (max-width: 736px) {.collection-container {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 20px;} ... } /* 1 Column Card Layout */ @media screen and (max-width:580px) {.collection-container {display: grid;grid-template-columns: 1fr;} }

整理筆記 (Finishing Notes)

Accessibility is an area that wasn’t considered at all and may have some space for improvement.

可訪問性是一個(gè)根本沒有考慮的領(lǐng)域，可能還有一些改進(jìn)的空間。

If you have any ideas or second thoughts, please feel free to comment!

如果您有任何想法或第二想法，請(qǐng)隨時(shí)發(fā)表評(píng)論！

And of course, thanks for reading.

當(dāng)然，感謝您的閱讀。

翻譯自: https://www.freecodecamp.org/news/https-medium-com-nakayama-shingo-creating-responsive-tables-with-pure-css-using-the-grid-layout-module-8e0ea8f03e83/

css響應(yīng)式網(wǎng)格布局生成器

總結(jié)

以上是生活随笔為你收集整理的css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。