CSS グリッド レイアウトの概要 module_html/css_WEB-ITnose

Web アプリケーションがますます複雑になるにつれて、float やその他の面倒なテクニックを使用するなど、巧妙なソリューションを使用せずに、より自然な方法で高度なレイアウトを簡単に作成する必要があります。

この入門チュートリアルでは、この比較的新しい CSS 機能を紹介し、最初に現在のブラウザーのサポートについて説明します。次に、いくつかの例を使用して、CSS グリッド レイアウト モジュールがどのように機能するかを示します。

CCS グリッド レイアウト モジュールとは

グリッド レイアウトの背後にある中心的な考え方は、Web ページを列と行に分割し、さまざまなサイズ、位置、レイヤーに基づいて行と列を配置できることです。そして、作成したブロック要素のサイズを変更します。

グリッドを使用すると、HTML を変更せずに CSS のみを使用して要素の位置を変更することもできます。これをメディア クエリと組み合わせて、さまざまなブレークポイントでレイアウトを変更することもできます。

ブラウザのサポート

グリッド レイアウトについて詳しく説明する前に、ブラウザのサポートと、現在のブラウザでこの機能を有効にする方法を理解することが非常に有益です。

Internet Explorer

グリッド レイアウトの最初の提案は Microsoft によって提案され、IE10 は -ms プレフィックスを付けて実装される予定でした。ブラウザのサポートを確認したことがある場合は、IE11 と Edge もグリッド レイアウトをサポートしていることがわかります。

Chrome と Opera

Blink レンダリング エンジンを使用して、ブラウザーでグリッド レイアウトを有効にします。たとえば、アドレス バーを使用して chrome://flags (または Chrome では opera:/ に移動します)。 Opera ブラウザー) /flags (Opera にも適用) を実行し、実験的な Web プラットフォーム機能を有効にするためのフラグを見つけます。有効にすると、ブラウザを再起動するように求められます。

これまでのところ、Blink がグリッド レイアウトを最もよく実装できるため、この記事または独自の例では Chrome または Opera ブラウザを使用することをお勧めします。

Firefox

about:config に移動し、layout.css.grid.enabled フラグを検索して、ダブルクリックするか Enter キーを押して true に切り替えます。 🎜>

グリッド レイアウト ポリフィル

現在のブラウザでポリフィルを使用すると、グリッド レイアウト モジュールが正常に動作するようになります。

グリッド レイアウトの例

例からグリッド レイアウトの威力を見てみましょう。次に、いくつかの新しい概念について詳しく説明します。

4 つのフルハイトの列レイアウト (Twitter、返信、検索、メール) を備えた Twitter アプリケーションを作成すると想像してください。これを以下のスクリーンショットのようなものに抽象化できます。

HTML コードは次のとおりです:

次に、.app-layout コンテナー要素にいくつかの CSS スタイルを適用します:

<div class="app-layout">    <div class="tweets">Tweets</div>    <div class="replies">Replies</div>    <div class="search">Search</div>    <div class="messages">Messages</div></div>

追加した CSS スタイルの説明は次のとおりです。

.app-layout {    display: grid; /* 1 */    grid-template-columns: 1fr 1fr 1fr 1fr; /* 2 */    grid-template-rows: 100vh; /* 3 */}

表示属性を Grid に設定します。

コンテナー要素を 4 つの列に分割し、各列が 1fr を占めます。 Grid コンテナ内の利用可能なスペース (一部)。
行を作成し、高さを 100vh (ビューポート全体の高さ) に設定します。
• ご覧のとおり、グリッド レイアウト モジュールの表示プロパティの値は Grid です。グリッド値は、.app-layout 要素をグリッド コンテナーとして設定するために使用され、また、そのコンテンツの新しいグリッド形式コンテキストを確立します。グリッド レイアウトを使用するには、このプロパティを有効にする必要があります。

Grid では、grid-template-columns プロパティは各 Grid 列の幅を指定します。この例では、.app-layout コンテナーが使用可能な列の 1fr (25%) を占めます。空間。

Grid-template-rows 属性は、各グリッド行の高さを指定します。この例では、100vh 行のみを作成しました。

2 列 2 行のレイアウトは次のようになります:

次の CSS スタイルを適用します:

メディア クエリ内でコードを使用すると、上記の例を小さな画面のデバイスでも同様に機能させることができます。これにより、カスタマイズしたレイアウトをさまざまなウィンドウでさまざまな方法で開くことができるようになり、大きなメリットが得られます。たとえば、次のように、前に作成したレイアウトをビューポート サイズが 1024px の場合にのみ有効にすることができます。

.app-layout {    display: grid;    grid-template-columns: 1fr 1fr;    grid-template-rows: 50vh 50vh;}

グリッド レイアウト モジュールの概念

@media screen and (max-width: 1024px) {    .app-layout {        display: grid;        grid-template-columns: 1fr 1fr;        grid-template-rows: 50vh 50vh;    }}

これで、ご覧になりました。簡単な例を示します。グリッド レイアウトをよりよく理解できるように、いくつかの新しい概念を紹介します。新しい概念はたくさんありますが、そのうちのいくつかを見てみましょう。

グリッド項目

グリッド項目は、Grid コンテナーの子要素です。上の例では、.tweets 要素と .replies 要素の両方が Grid アイテムとして認められます。

グリッド線

グリッド線は、行または列の隣に存在する線です。グリッド線の設定は 2 つあり、1 つは列 (縦軸) の定義に使用され、もう 1 つは行 (横軸) の定義に使用されます。

上は最初の例のスクリーンショットです。5 つの垂直線を作成する 1fr の 4 つの列を作成しました。列も作成して横線を2本作りました。

グリッド コンテナ内にグリッド アイテムを配置する方法を見てみましょう。

通过使用行号对项进行定位

你可以通过使用 grid-column-start 和 grid-column-end 属性来引用Grid中确切的行号。然后我们给这些属性赋值开始和结束的行号。

看着前面的示例中，浏览器是如何为我们的元素进行默认定位的:

.tweets   {    grid-column-start: 1;    grid-column-end: 2;    grid-row: 1;}.replies  {    grid-column-start: 2;    grid-column-end: 3;    grid-row: 1;}.search   {    grid-column-start: 3;    grid-column-end: 4;    grid-row: 1;}.messages {    grid-column-start: 4;    grid-column-end: 5;    grid-row: 1;}

从 .tweet 列的代码来看，这就是三行在 CSS 中所起的作用:

• 从左边第一竖行对子元素进行定位。
• 在第二竖行对元素定位进行结束。
• 在整个行内对元素进行定位。

你也可以通过改变元素的顺序对元素位置进行改变，所以元素的顺序会更改为 .search 、 .replies 、 .messages 、 .tweets .

代码如下:

.tweets {    grid-column-start: 4;    grid-column-end: 5;    grid-row: 1;}.replies {    grid-column-start: 2;    grid-column-end: 3;    grid-row: 1;}.search {    grid-column-start: 1;    grid-column-end: 2;    grid-row: 1;}.messages {    grid-column-start: 3;    grid-column-end: 4;    grid-row: 1;}

我们也可以使用 grid-column 简写属性在一行中设置开始和结束行:

.tweets {    grid-column: 4 / 5;    grid-row: 1;}.replies {    grid-column: 2 / 3;    grid-row: 1;}.search {    grid-column: 1 / 2;    grid-row: 1;}.messages {    grid-column: 3 / 4;    grid-row: 1;}

使用Grid布局一个很好的优点在于，当标记没有任何变化时，可以通过改变CSS改变布局结构。这样我们就可以独立于布局原顺序重新更改元素布局，从而在不同的屏幕大小与方向上实现我们所需的布局。

使用命名区域定位项

一个Grid区域是使用一个或多个Grid项布局的逻辑空间。我们可以使用 grid-template-areas 属性显示的对Grid区域进行命名，然后使用 grid-area 属性将Grid项放置到特定的区域。

为了使这一概念更加清晰，让我们使用 search 列重做之前的四列示例:

.app-layout {    display: grid;    grid-template-columns: 1fr 1fr 1fr 1fr;    grid-template-rows: 100vh;    grid-template-areas: "search replies messages tweets";}

在最后一行中，我们使用四个列名字将Grid容器分成四个命名的Grid区域。下一步就是对每个Grid项赋予一个命名区域 ︰

.search {    grid-area: search;}.replies {    grid-area: replies;}.messages {    grid-area: messages;}.tweets {    grid-area: tweets;}

Slack示例

怎么使用Grid布局模块来执行更复杂的例子，例如，创建 Slack 块布局。因为我们正在谈论布局，我们将在Grid中抽象并简化Slack设计。如下所示:

在这个布局中，我们将创建三个垂直列和三个水平行，我们可以想象使用Grid 线来构建布局，如下所示:

HTML代码:

<div class="app-layout">    <div class="teams">Teams</div>    <div class="channels">Channels</div>    <div class="header">Header</div>    <div class="messages">        <ul class="message-list">            <li></li>            <li></li>        </ul>    </div>    <div class="input">        <input type="text" placeholder="CSS Grid Layout Module">    </div></div>

CSS代码:

.app-layout {    display: grid;    height: 100vh;    grid-template-columns: 100px 250px 1fr;    grid-template-rows: auto 1fr auto;}

这里我使用 grid-template-columns 属性在创建了大小为 100px ， 250px 和 1fr (即剩余可用空间)的三列。并在最后一行创建三行: 自由调整高度的第一和第三行，中间行占用剩余的可用空间。

其余CSS样式如下:

.teams {    grid-column: 1;    grid-row: 1 / 4;}.channels {    grid-column: 2;    grid-row: 1 / 4;}.header {    grid-column: 3;    grid-row: 1;}.messages {    grid-column: 3;    grid-row: 2;}.input {    grid-column: 3;    grid-row: 3;}

在创建slack布局时，我们也可以使用命名区域，就像你可以在此演示中看到的一样:

Grid布局模块 vs Flexbox

相信许多人已经开始使用Flexbox，你可能就会想要知道:什么时候适合使用 Flexbox 并且什么时候会更适合使用Grid布局呢？

从Tab Atkins中，我发现了 一个好的解释 :

Flexbox 适合许多布局和很多"页面组件"元素，因为大部分它们都是基于线性的。Grid适用于整体的页面布局和一些不是线性的复杂的页面组件。 两种布局模式可以任意组合。因此，一旦它们被都广泛支持，我相信大多数文本内容页面将由Grid构建的整体布局、 混合嵌套的 flexboxes、Grid组件页和块/内联/表布局构成。

并且 Rachel Andrew也说 :

Grid布局用于行和列结构的主页面。 Flexbox用于导航，UI元素以及一切你可以线性化的。

CSS Grid布局模块资源

我并没有涵盖Grid布局所有的概念和语法，所以我建议你查阅下列资源去更深入地了解:

• Grid中文教程
• CSS Grid布局模块规范
• CSS Grid布局示例
• Grid示例
• CSS 布局的未来:Grid布局

总结

如上所示，即将到来的 CSS Grid布局模块拥有代码的简洁性和在不更改的标记的情况下，强大的更改布局顺序的能力。这些功能可以帮助我们改变创建网页布局的方式。

本文根据 @Ahmad Ajmi 的《 An Introduction to the CSS Grid Layout Module 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://www.sitepoint.com/introduction-css-grid-layout-module/ 。

静子

在校学生，本科计算机专业。一个积极进取、爱笑的女生，热爱前端，喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博：@静-如秋叶