CSS 中文開發手冊

網格佈局和漸進增強 | CSS Grid Layout: CSS Grid and Progressive Enhancement (Grid Layout) - CSS 中文開發手冊

在2017的春天，我們第一次看到像Grid這樣的主要規範幾乎同時釋出到瀏覽器中，我們很快就會在火狐、Chrome、Opera和Safari的公共版本中提供CSSGrid佈局支援。然而，雖然常綠瀏覽器意味著我們中的許多人會很快看到大多數使用者支援網格佈局，但也有一些舊的或不支援的瀏覽器需要應對。在本指南中，我們將介紹各種支援策略。

支援瀏覽器

除了InternetExplorer/Edge之外，在Safari、Chrome、Opera和Firefox中，CSS網格佈局都沒有字首。對這些指南中詳細說明的所有屬性和值的支援在瀏覽器之間是可互操作的。這意味著，如果您在Firefox中編寫一些網格佈局程式碼，它在Chrome中的工作方式應該是相同的。這不再是一個實驗規範，您在生產中使用它是安全的。

Internet資源管理器與邊緣狀態

應該記住，CSS網格佈局的最初實現發生在InternetExplorer 10中。這個早期規範沒有包含最新規範所具有的所有屬性和值。IE 10中提供的內容與當前規範也有很大的差異，即使在屬性和值看起來相同的情況下也是如此。此早期實現也是在當前版本的Edge中實現的網格佈局的版本。

規範的IE/Edge版本以-ms字首和在IE/Edge中實現的屬性如下：

grid-template-columns如-ms-grid-columnsgrid-template-rows如-ms-grid-rowsgrid-row-start如-ms-grid-rowgrid-column-start如-ms-grid-columnalign-self如-ms-grid-column-alignjustify-self如-ms-grid-row-align

的新規範中不需要IE版本的附加屬性。-ms-grid-column-span和-ms-grid-row-span此版本不包括自動放置功能或網格模板區域.。可以為IE10實現一些簡單的網格佈局，直到當前邊緣，使用-ms財產。由於這些屬性是供應商字首的，因此不會影響任何支援最新和無字首規範的瀏覽器。

自動重固定器網格佈局支援

流行工具自動復位器已更新以支援-ms-使用新網格屬性時的網格版本。除非你的佈局是非常簡單的線基礎的佈局，這很可能會導致你更多的問題，它解決了。我不建議讓自動復位器在網格屬性上執行，如果對您有意義的話，可以使用網格佈局的IE版本編寫一個版本。

我的佈局使用CSS網格安全嗎？

與任何前端技術選擇一樣，使用css Grid佈局的決定將取決於站點訪問者通常使用的瀏覽器。如果他們傾向於使用最新版本的火狐、Chrome、Opera和Safari，那麼一旦這些瀏覽器更新，就應該開始使用css網格。但是，如果您的站點服務於與舊瀏覽器相關聯的市場部門，那麼它可能還沒有意義。但是，我的建議是，不要根據過去瀏覽器中推出的新規範來進行假設。CSS網格佈局是非常不同的，在它開發的時間上，以及各個瀏覽器供應商的工作，以確保什麼船舶以相同的方式為每個人工作。

實際使用中使用網格

值得注意的是，您不必在全部或無是的。您可以通過使用網格簡單地增強設計中的元素，否則就可以使用舊的方法顯示元素。由於網格與這些其他方法的互動方式，用網格佈局覆蓋遺留方法的效果令人驚訝。

浮動佈局

我們通常用浮動佈局建立多列布局，請執行以下操作。如果您已經浮動了一個項(它也是支援瀏覽器中的網格項)，則浮點數將不再適用於該項。事實是網格項優先。在下面的示例中，我有一個簡單的媒體物件。在不支援的瀏覽器中，我使用float但是，為了使用CSS網格中實現的對齊屬性，我也將容器定義為網格容器。

float不再適用，若要將內容與容器的末尾對齊，我可以使用CSSBox對齊屬性align-self：

* {box-sizing: border-box;}
img {
    max-width: 100%;
    display: block;
}
.media {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 400px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "img content";
    margin-bottom: 1em;
}
.media::after {
    content: "";
    display: block;
    clear: both;
}
.media .image {
    float: left;
    width: 150px;
    margin-right: 20px; 
}
.media .text {  
    padding: 10px;
    align-self: end;   
}

<div class="media">
        <div class="image"><img src="https://placehold.it/150x150" alt="placeholder"></div>
        <div class="text">This is a media object example. I am using floats for older browsers and grid for new ones.</div>
</div>

下圖顯示左側不支援的瀏覽器中的媒體物件，右側的支援物件：

使用功能查詢

上面的例子非常簡單，我們可以不需要編寫程式碼就可以解決這些問題，對於不支援網格的瀏覽器來說，這將是一個問題，而遺留程式碼對於我們支援瀏覽器的網格來說並不是一個問題。然而，事情並不總是那麼簡單。

在下一個例子中，我有一組浮動卡。我給了卡片width，為了float他們。要在卡片之間建立空白，我使用margin在專案上，然後在容器上出現負值：

.wrapper ul {   
    overflow: hidden;
    margin: 0 -10px;
    padding: 0;
    list-style: none;
}
.wrapper li {
    float: left;
    width: calc(33.333333% - 20px);
    margin: 0 10px 20px 10px;
}

<div class="wrapper">
    <ul>
        <li class="card"><h2>One</h2>
          <p>We can use CSS Grid to overwrite older methods.</p>
        </li>
        <li class="card"><h2>Two</h2>
          <p>We can use CSS Grid to overwrite older methods.</p>
        </li>
        <li class="card"><h2>Three</h2>
        <p>We can use CSS Grid to overwrite older methods.</p>
        </li>
        <li class="card"><h2>Four</h2>
        <p>We can use CSS Grid to overwrite older methods.</p>
        </li>
        <li class="card"><h2>Five</h2>
        <p>We can use CSS Grid to overwrite older methods.</p>
        </li>
        <li class="card"><h2>Six</h2>
        <p>We can use CSS Grid to overwrite older methods.</p>
        </li>
      </ul>
</div>

該示例演示了浮動佈局的典型問題：如果向任何一張卡添加了其他內容，佈局就會中斷。