国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

目錄
> CSS網(wǎng)格本質(zhì)上反應(yīng)靈敏，可以使用最小的媒體查詢對(duì)不同屏幕尺寸的內(nèi)容進(jìn)行輕松重組。
計(jì)劃網(wǎng)格
>頁(yè)腳
>讓我們從大屏幕開(kāi)始（在本文中，我將堅(jiān)持與Bootstrap 4中定義的相同的斷點(diǎn)）。我想降低主容器的水平邊緣和單個(gè)贊助商之間的差距：
>在中屏幕上，我希望主內(nèi)容區(qū)域和側(cè)邊欄占據(jù)所有三列：
后備
結(jié)論
>如何開(kāi)始在項(xiàng)目中使用CSS網(wǎng)格改造？
是的，可以將CSS網(wǎng)格改造與其他布局方法（如Flexbox）結(jié)合使用，例如Flexbox，以進(jìn)行更復(fù)雜的設(shè)計(jì)。當(dāng)您要?jiǎng)?chuàng)建一個(gè)部分靈活且部分固定的布局時(shí)，這可能特別有用。改造包括使用命名網(wǎng)格區(qū)域，以更容易布局管理，使用FR單元進(jìn)行靈活的網(wǎng)格軌道以及在瀏覽器的開(kāi)發(fā)人員工具中使用網(wǎng)格檢查器可視化和調(diào)試網(wǎng)格布局。
是的，是的，CSS Grid Raturofit是一個(gè)二維系統(tǒng)，是二維系統(tǒng)，這意味著它可以處理列和行。這使其成為創(chuàng)建水平和垂直布局的多功能工具。
首頁(yè) web前端 css教程 重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

Feb 15, 2025 am 08:45 AM

重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

在本文中，我們將通過(guò)創(chuàng)建響應(yīng)迅速的多列網(wǎng)站布局來(lái)查看CSS電網(wǎng)。 如今，CSS網(wǎng)格是網(wǎng)絡(luò)開(kāi)發(fā)的新趨勢(shì)。忘了桌子布局和浮點(diǎn)：設(shè)計(jì)網(wǎng)站的新方法已經(jīng)在這里！這項(xiàng)技術(shù)引入了二維網(wǎng)格，該網(wǎng)格定義了使用少數(shù)CSS規(guī)則的布局多個(gè)區(qū)域。

>網(wǎng)格可以制造第三方框架，例如960GS或Bootstrap Grid冗余，因?yàn)槟梢暂p松地自己完成所有操作！盡管Internet Explorer實(shí)現(xiàn)了規(guī)格的較舊版本，但此功能都得到了所有主要瀏覽器的支持。

>

如果您是網(wǎng)格布局的新手，請(qǐng)查看我們的初學(xué)者指南CSS網(wǎng)格指南。

鑰匙要點(diǎn)

> css網(wǎng)格布局簡(jiǎn)化了多列布局的創(chuàng)建，消除了對(duì)諸如浮子和顯示桌子之類(lèi)的舊技術(shù)的需求。> 與傳統(tǒng)的CSS框架（如Bootstrap）相比

CSS網(wǎng)格的實(shí)現(xiàn)涉及定義一個(gè)具有顯示的容器：網(wǎng)格，設(shè)置列和行，并使用簡(jiǎn)單的CSS規(guī)則將元素放入指定的網(wǎng)格區(qū)域。

> CSS網(wǎng)格本質(zhì)上反應(yīng)靈敏，可以使用最小的媒體查詢對(duì)不同屏幕尺寸的內(nèi)容進(jìn)行輕松重組。

對(duì)于不完全支持CSS網(wǎng)格的瀏覽器，例如Internet Explorer，使用內(nèi)聯(lián)塊和媒體查詢的后備樣式可確保布局仍然有效地呈現(xiàn)。
    > CSS網(wǎng)格和Flexbox可以合并以滿足復(fù)雜的設(shè)計(jì)要求，展示CSS電網(wǎng)在現(xiàn)代網(wǎng)絡(luò)設(shè)計(jì)中的兼容性和多功能性。
    • 我們要構(gòu)建的
    • 因此，我們被要求創(chuàng)建一個(gè)典型的網(wǎng)站布局，其中包含標(biāo)頭，主內(nèi)容區(qū)域，右側(cè)側(cè)邊欄，贊助商列表和頁(yè)腳：>
    • >另一個(gè)開(kāi)發(fā)人員已經(jīng)嘗試解決此任務(wù)，并提出了一個(gè)涉及浮點(diǎn)，顯示的解決方案：表格和一些Clearfix Hacks。我們將這種現(xiàn)有布局稱(chēng)為“初始”：>
  • 請(qǐng)參閱Pen SP：codepen上的sitepoint（@sitepoint）的浮子的多柱布局。
  • 直到最近，浮子被認(rèn)為是創(chuàng)建這種布局的最佳選擇。在此之前，我們必須使用HTML表，但是它們有許多缺點(diǎn)。具體而言，此類(lèi)布局非常僵化，需要大量標(biāo)簽（表，TR，TD，TH等），而這些標(biāo)簽則使用這些標(biāo)簽來(lái)顯示表數(shù)據(jù)，而不是設(shè)計(jì)布局。

    ，但是CSS繼續(xù)發(fā)展，現(xiàn)在我們有了CSS網(wǎng)格。從概念上講，它類(lèi)似于舊的表布局，但可以使用具有更靈活的布局的語(yǔ)義HTML元素。

    計(jì)劃網(wǎng)格

    首先：我們需要為文檔定義基本的HTML結(jié)構(gòu)。在此之前，讓我們簡(jiǎn)要討論最初的示例如何工作。它具有以下主要塊：

    • 。
      • .Main-Header是包含.logo（占據(jù)20％的空間，漂浮在左側(cè)的20％）和.main-menu（占據(jù)79％的空間，漂浮在右側(cè)的79％）的標(biāo)題。標(biāo)題還分配了一個(gè)駭客修復(fù)程序以清除浮子。
      • .content-area-wrapper包裝主.CONTENT-AREA（占據(jù)了66.6％的空間，負(fù)1REM保留了邊緣，左側(cè)漂浮在左側(cè)）和.sidebar（占據(jù)了33.3％的空間，漂浮在右邊的33.3％ ）。包裝器本身也用clearfix分配了。
      • .sponsors-wrapper包含贊助商的徽標(biāo)。在內(nèi)部，有一個(gè).spors部分，其中包含顯示屬性為表。每個(gè)贊助商依次顯示為表單元格。
      • .footer是我們的頁(yè)腳，并且跨越了100％的空間。
      • 我們的新布局將與最初的布局非常相似，但是除了一個(gè)例外：我們不會(huì)添加.main-header和.content-area-area-wrapper包裝器，因?yàn)椴辉傩枰猚learfix。這是html的新版本：

    請(qǐng)注意，您可以將身體用作全局.Container；在這種情況下，這只是偏愛(ài)的問(wèn)題?？偠灾?，我們有六個(gè)主要領(lǐng)域：
    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

    徽標(biāo)
    1. 菜單
    2. 主要內(nèi)容
    3. sidebar
    4. 贊助商
    5. >頁(yè)腳
      7. 通常建議您實(shí)施一種移動(dòng)優(yōu)先的方法。也就是說(shuō)，您是從移動(dòng)布局開(kāi)始的，然后為大屏幕添加樣式。在這種情況下，這不是必需的，因?yàn)槲覀冋谡{(diào)整初始布局，該布局已經(jīng)回到了小屏幕設(shè)備上的線性視圖。因此，讓我們首先關(guān)注電網(wǎng)的實(shí)現(xiàn)，然后再討論響應(yīng)能力和后備規(guī)則。因此，返回我們的計(jì)劃，看看如何安排網(wǎng)格列：>

    >所以，我建議擁有三列（以紅色突出顯示）和四行（以藍(lán)色突出顯示）。某些區(qū)域（例如徽標(biāo)）將僅占據(jù)一列，而其他區(qū)域（如主內(nèi)容）將跨越多列。稍后，我們可以輕松修改布局，移動(dòng)周?chē)膮^(qū)域或添加新的區(qū)域。重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局>

    遵循該方案，給每個(gè)區(qū)域一個(gè)唯一的名稱(chēng)。這些將用于以下定義的布局：

    >

    >現(xiàn)在將顯示屬性設(shè)置為網(wǎng)格，定義三列，并在主容器的左側(cè)和右側(cè)添加少量邊距：

    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

    顯示：網(wǎng)格定義一個(gè)網(wǎng)格容器，并為其孩子設(shè)置特殊的格式上下文。 FR是一個(gè)特殊的單元，意思是“網(wǎng)格容器的自由空間的一部分”。 2 6 4給我們12，而6/12 = 0.5。這意味著中間的列將占據(jù)自由空間的50％。

    >

    >我也想在行之間添加一些間距：> 

    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>
    完成此操作，我們可以與各個(gè)領(lǐng)域合作。但是，在結(jié)束本節(jié)之前，讓我們快速添加一些常見(jiàn)的樣式：

    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    好！現(xiàn)在，我們可以前往第一個(gè)目標(biāo)，這將是標(biāo)題。>

    設(shè)計(jì)標(biāo)題

    >我們的標(biāo)頭占據(jù)了第一行，該排應(yīng)該將特定的高度設(shè)置為3REM。在初始布局中，通過(guò)為標(biāo)頭包裝器分配高度屬性來(lái)解決：>

    >還請(qǐng)注意，徽標(biāo)和菜單垂直與中間對(duì)齊，這是使用線路高技巧實(shí)現(xiàn)的：

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

    使用CSS網(wǎng)格，事情將變得更簡(jiǎn)單：我們不需要任何CSS hacks。

    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>
    從定義第一行開(kāi)始：

    我們的徽標(biāo)應(yīng)僅占據(jù)一列，而菜單應(yīng)跨越兩個(gè)列。我們可以借助網(wǎng)格 - 板序列屬性來(lái)表達(dá)我們的意圖，該屬性引用了上面分配的網(wǎng)格區(qū)域名稱(chēng)：> 

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>
    這是怎么回事？好吧，通過(guò)說(shuō)徽標(biāo)僅一次，我們確保它僅占用一個(gè)徽標(biāo) - 最左側(cè)的專(zhuān)欄。菜單菜單意味著菜單占有兩列：中間和最正確的一列。看看這個(gè)規(guī)則有多簡(jiǎn)單！

    >

    現(xiàn)在，在y軸上對(duì)齊徽標(biāo)：
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

    菜單應(yīng)垂直居中并向右拉動(dòng)：>

    >我們的菜單是使用UL和LI標(biāo)簽構(gòu)建的，因此，我們還通過(guò)刪除標(biāo)記，無(wú)效的邊距/撥片并將菜單設(shè)置為Flex容器來(lái)對(duì)它們進(jìn)行一些樣式。 
    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>

    >就是這樣。為了觀察結(jié)果，我將使用啟用方便的CSS網(wǎng)格熒光筆工具使用Firefox。 （對(duì)于其他瀏覽器也有類(lèi)似的工具：例如，Chrome的Gridman。）要訪問(wèn)此工具，請(qǐng)按F12并選擇.Container元素，該元素應(yīng)該具有網(wǎng)格標(biāo)簽：

    > 
    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-areas:
</span>    <span>"logo menu menu";
</span><span>}
</span>

    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span>  <span>align-self: center;
</span><span>}
</span>
    之后，繼續(xù)進(jìn)行CSS規(guī)則選項(xiàng)卡，并找到顯示：網(wǎng)格屬性。通過(guò)按在網(wǎng)格值旁邊的小圖標(biāo)上，您可以啟用或禁用熒光筆：

    重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

    這是結(jié)果：

    重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

    熒光筆顯示您的所有行和列以及它們與區(qū)域名稱(chēng)之間的邊距。您可以自定義布局部分中的輸出，該輸出還列出了頁(yè)面上的所有網(wǎng)格：>

    重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

    >所以，我們已經(jīng)處理了標(biāo)題，所以讓我們繼續(xù)前往主要內(nèi)容區(qū)域和側(cè)邊欄。

    主內(nèi)容和側(cè)邊欄

    >我們的主要內(nèi)容區(qū)域應(yīng)跨兩列，而側(cè)邊欄應(yīng)僅占據(jù)一列。至于行，我希望它的高度自動(dòng)設(shè)置。我們可以相應(yīng)地更新.CONTAINER網(wǎng)格：

    > 

    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
    >我想為側(cè)邊欄添加一些填充物，以提供更多的視覺(jué)空間：>

    這是結(jié)果，如Firefox的網(wǎng)格工具中所述： 
    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

    贊助商重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

    贊助商部分應(yīng)包含五個(gè)具有相等寬度和高度的項(xiàng)目。每個(gè)項(xiàng)目依次都會(huì)有一個(gè)圖像。

    在初始布局中，此塊的樣式是顯示：表格，但我們不會(huì)依靠它。實(shí)際上，贊助商部分也可能是應(yīng)用CSS網(wǎng)格的絕佳候選人！

    首先，調(diào)整網(wǎng)格 - 板截面以包括贊助商區(qū)域：

    現(xiàn)在，將.sponsors部分也變成一個(gè)網(wǎng)格：

    只要我們需要五個(gè)具有相等寬度的項(xiàng)目，重復(fù)（）函數(shù)就可以用于定義列：> 
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    對(duì)于行，應(yīng)自動(dòng)設(shè)置其高度。列之間的差距應(yīng)等于1REM：

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>
    樣式每個(gè)項(xiàng)目：

    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>
    這是中間結(jié)果：

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

    >此示例說(shuō)明您可以嵌套網(wǎng)格而沒(méi)有任何問(wèn)題。另一個(gè)解決方案可能是使用Flexbox，但是在這種情況下，如果沒(méi)有足夠的寬度，則贊助商可能會(huì)包裝。
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    >

    >現(xiàn)在，我想將圖像垂直和水平居中。我們可能會(huì)嘗試執(zhí)行以下操作：

    重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局位置對(duì)X和Y軸上的元素對(duì)齊。這是對(duì)自己的速記屬性和自我合理的。

    >

    圖像確實(shí)會(huì)對(duì)齊，但不幸的是，白色背景消失了。這是因?yàn)槊總€(gè)贊助器現(xiàn)在的寬度和高度等于圖像的尺寸：> 

    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>
    這意味著我們?cè)谶@里需要另一種方法，并且可能的解決方案之一是采用flexbox：>

    現(xiàn)在，一切都正確顯示了，現(xiàn)在我們知道網(wǎng)格與flexbox效果很好：

    重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

    >頁(yè)腳

    我們的最后一部分是頁(yè)腳，實(shí)際上是最簡(jiǎn)單的部分。我們要做的就是將其跨到所有三列：> 

    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
    基本上，布局已經(jīng)完成！但是，我們還沒(méi)有完成：該網(wǎng)站也必須響應(yīng)迅速。因此，讓我們?cè)谙乱还?jié)中照顧這項(xiàng)任務(wù)。

    >

    使布局響應(yīng)

    有CSS網(wǎng)格，實(shí)際上很容易引入響應(yīng)能力，因?yàn)槲覀兛梢钥焖僦匦露ㄎ贿@些區(qū)域。

    大屏幕

    >讓我們從大屏幕開(kāi)始（在本文中，我將堅(jiān)持與Bootstrap 4中定義的相同的斷點(diǎn)）。我想降低主容器的水平邊緣和單個(gè)贊助商之間的差距：

    中等屏幕
    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

    >在中屏幕上，我希望主內(nèi)容區(qū)域和側(cè)邊欄占據(jù)所有三列：

    >還要降低字體尺寸并堆放贊助商，以便它們?cè)诹硪粋€(gè)下方顯示。列之間的差距應(yīng)為零（因?yàn)閷?shí)際上只有一個(gè)列）。相反，我將在行之間設(shè)置差距：
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

    這是現(xiàn)在中屏幕上的布局外觀：
    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

    重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局小屏幕

    >在小屏幕上，我們將在單獨(dú)的一行上顯示每個(gè)區(qū)域，這意味著現(xiàn)在只有一個(gè)列：>

    在這種情況下，不應(yīng)將菜單拉到右側(cè)，我們也不需要列之間的差距：

    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>
    工作完成：

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

    請(qǐng)注意，您甚至可以在各種屏幕上輕松地重新排列網(wǎng)格項(xiàng)目。假設(shè)我們想將菜單放在小屏幕上的菜單（以便訪問(wèn)者在頁(yè)面上完成閱讀材料后不必滾動(dòng)）。為此，只需調(diào)整網(wǎng)格 - 板序列：

    重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

    在沒(méi)有媒體查詢的情況下做

    >值得一提的是，我們可以使贊助商完全不受任何媒體疑問(wèn)而阻止響應(yīng)。在自動(dòng)擬合屬性和MinMax功能的幫助下，這是可能的。要查看它們的行動(dòng)，請(qǐng)調(diào)整這樣的贊助商的樣式：
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    >

    您已經(jīng)知道，重復(fù)功能在必要時(shí)重復(fù)了多次列。

    自動(dòng)填充意思是“用盡可能多的列填充行”。如果列沒(méi)有足夠的空間，則將其放置在下一行。

    > 
    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>
    minmax允許我們指定列寬度的最小值和最大值。在這種情況下，每列應(yīng)跨越1個(gè)自由空間的一部分，但不少于200個(gè)像素。

    所有這些意味著在較小的屏幕上，列可以縮小到最多的200px。如果仍然沒(méi)有足夠的空間，則將移動(dòng)一條或多個(gè)列。這是應(yīng)用上述CSS規(guī)則的結(jié)果：

    重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

    后備

    不幸的是，所有瀏覽器尚未完全支持CSS網(wǎng)格，您可能會(huì)猜測(cè)哪個(gè)仍在實(shí)現(xiàn)規(guī)范的較舊版本。是的，它是Internet Explorer 10和11。如果您在這些瀏覽器中打開(kāi)演示，您會(huì)發(fā)現(xiàn)網(wǎng)格根本不起作用，并且這些區(qū)域只是堆疊的：

    >

    重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局

    當(dāng)然，這不是世界末日，因?yàn)樵摼W(wǎng)站仍然可用，但至少添加一些后備規(guī)則。好消息是，如果元素被漂浮并也已分配，則網(wǎng)格優(yōu)先。另外，顯示器，垂直空間和其他某些屬性也對(duì)網(wǎng)格項(xiàng)目沒(méi)有影響，因此讓我們利用這一事實(shí)。

    >堆疊的菜單看起來(lái)不錯(cuò)，但是側(cè)邊欄可能應(yīng)放在主要內(nèi)容旁邊，而不是下面。我們可以使用顯示：inline-block：

    在所有支持網(wǎng)格的瀏覽器中，這些屬性都不會(huì)效果，但是在IE中，它們將按預(yù)期應(yīng)用。我們需要調(diào)整的另一項(xiàng)屬性是寬度：

    <span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="?">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
    >但是，添加了這些樣式后，我們的網(wǎng)格布局現(xiàn)在看起來(lái)會(huì)更糟，因?yàn)榫W(wǎng)格項(xiàng)目不忽略寬度屬性

    >?？梢越柚鶣supports CSS查詢來(lái)解決。 IE不了解這些查詢，但不需要：我們將使用它來(lái)修復(fù)網(wǎng)格！

    > 
    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

    現(xiàn)在，讓我們照顧贊助商項(xiàng)目，并為每個(gè)塊添加一些最高邊距：> >在支撐網(wǎng)格時(shí)我們不需要任何最高邊距，因此將其在@supports查詢中無(wú)效：

    > 
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    最后，讓我們?yōu)镮E添加一些響應(yīng)能力。我們只需將主要內(nèi)容，側(cè)邊欄和每個(gè)贊助商拉伸到較小屏幕上的全寬度：

    > 

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>
    不要忘記修復(fù)支持網(wǎng)格的瀏覽器的贊助商的寬度：

    這是Internet Explorer中的布局外觀：> 
    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>
    您可以在Codepen上查看最終結(jié)果：

    請(qǐng)參閱pen sp：codepen上的sitepoint（@sitepoint）帶網(wǎng)格的多柱布局。
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

    結(jié)論

    在本文中，我們看到了CSS網(wǎng)格在作用中，并利用了它來(lái)重新設(shè)計(jì)現(xiàn)有的基于浮點(diǎn)的布局。比較這兩種解決方案，我們可以看到“網(wǎng)格”解決方案的HTML和CSS代碼較?。ó?dāng)然不計(jì)算后備），更簡(jiǎn)單且更具表現(xiàn)力。借助網(wǎng)格 - 板塊區(qū)域?qū)傩裕苋菀桌斫馊绾尾贾酶鱾€(gè)區(qū)域，我們可以快速重新定位它們或調(diào)整其尺寸。最重要的是，我們不需要依靠諸如clearfix等各種駭人聽(tīng)聞的技巧。

    >

    >因此，如您所見(jiàn)，CSS網(wǎng)格是浮子的絕佳選擇，并且已經(jīng)準(zhǔn)備好生產(chǎn)了。您可能需要為Internet Explorer提供一些后備規(guī)則（這實(shí)現(xiàn)了規(guī)范的較舊版本），但是如您所見(jiàn)，它們并不是很復(fù)雜，并且通常仍然可以使用該站點(diǎn)全部。

    您是否已經(jīng)嘗試使用CSS網(wǎng)格創(chuàng)建網(wǎng)站？您的印象是什么？在評(píng)論中分享您的想法！

    經(jīng)常詢問(wèn)有關(guān)CSS電網(wǎng)改造的問(wèn)題

    > CSS網(wǎng)格改造在Web設(shè)計(jì)中的重要性是什么？這是一個(gè)二維系統(tǒng)，這意味著它可以處理列和行，這與Flexbox不同，這在很大程度上是一個(gè)維系統(tǒng)。這使其成為創(chuàng)建適應(yīng)不同屏幕尺寸和分辨率的響應(yīng)設(shè)計(jì)的多功能工具。它還簡(jiǎn)化了在容器中的項(xiàng)目中對(duì)齊和分配空間的過(guò)程，即使它們的大小是未知或動(dòng)態(tài)的。由于其靈活性和易用性，改造從其他網(wǎng)格系統(tǒng)中脫穎而出。與其他需要大量編碼和計(jì)算的系統(tǒng)不同，CSS網(wǎng)格改造使開(kāi)發(fā)人員可以使用最小的代碼創(chuàng)建復(fù)雜的布局。它還提供了對(duì)元素的放置和對(duì)齊的更多控制權(quán)，使其成為許多開(kāi)發(fā)人員的首選選擇。

    我可以將CSS網(wǎng)格改造用于移動(dòng)響應(yīng)設(shè)計(jì)嗎？是創(chuàng)建移動(dòng)響應(yīng)設(shè)計(jì)的絕佳工具。它允許開(kāi)發(fā)人員使用媒體查詢?yōu)椴煌钠聊怀叽缍x不同的網(wǎng)格布局。這意味著您可以為桌面視圖創(chuàng)建一個(gè)復(fù)雜的布局，以及用于移動(dòng)視圖的更簡(jiǎn)單，更簡(jiǎn)化的布局，所有這些布局都在同一CSS文檔中。

    CSS Grid Retrofit的瀏覽器兼容性問(wèn)題是什么？ >

    CSS網(wǎng)格改造與大多數(shù)現(xiàn)代瀏覽器兼容，包括Chrome，F(xiàn)irefox，Safari和Edge。但是，在較舊的瀏覽器或版本中，它可能無(wú)法正常工作。在多個(gè)瀏覽器中測(cè)試您的設(shè)計(jì)始終是一個(gè)好習(xí)慣，以確保其按預(yù)期工作。

    >如何開(kāi)始在項(xiàng)目中使用CSS網(wǎng)格改造？

    >開(kāi)始使用CSS網(wǎng)格改造，您需要將容器元素定義為帶有顯示的網(wǎng)格：Grid：grid。然后，您可以使用網(wǎng)格 - 板塊柱和網(wǎng)格 - 板條排定義列和行大小，并將其子元素與網(wǎng)格元素一起使用網(wǎng)格和網(wǎng)格 - 列和網(wǎng)格行。使用其他布局方法網(wǎng)格改造？

    是的，可以將CSS網(wǎng)格改造與其他布局方法（如Flexbox）結(jié)合使用，例如Flexbox，以進(jìn)行更復(fù)雜的設(shè)計(jì)。當(dāng)您要?jiǎng)?chuàng)建一個(gè)部分靈活且部分固定的布局時(shí)，這可能特別有用。改造包括使用命名網(wǎng)格區(qū)域，以更容易布局管理，使用FR單元進(jìn)行靈活的網(wǎng)格軌道以及在瀏覽器的開(kāi)發(fā)人員工具中使用網(wǎng)格檢查器可視化和調(diào)試網(wǎng)格布局。

    元素？

    css網(wǎng)格改造允許元素重疊，這可以是創(chuàng)建唯一布局的強(qiáng)大工具。您可以控制與z index屬性重疊元素的堆疊順序。

    我可以將CSS網(wǎng)格改造用于垂直布局嗎？

    是的，是的，CSS Grid Raturofit是一個(gè)二維系統(tǒng)，是二維系統(tǒng)，這意味著它可以處理列和行。這使其成為創(chuàng)建水平和垂直布局的多功能工具。

    >

    >在使用CSS網(wǎng)格改造時(shí)，有哪些共同挑戰(zhàn)？

    >在與CSS網(wǎng)格翻新時(shí)有一些共同的挑戰(zhàn)包括處理瀏覽器兼容性問(wèn)題，處理重疊元素以及在許多網(wǎng)格區(qū)域管理復(fù)雜布局。但是，通過(guò)實(shí)踐和對(duì)網(wǎng)格屬性的良好理解，可以克服這些挑戰(zhàn)。

以上是重新設(shè)計(jì)站點(diǎn)以使用CSS網(wǎng)格布局的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本站聲明
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費(fèi)脫衣服圖片

Undresser.AI Undress

Undresser.AI Undress

人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用于從照片中去除衣服的在線人工智能工具。

Clothoff.io

Clothoff.io

AI脫衣機(jī)

Video Face Swap

Video Face Swap

使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費(fèi)的代碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級(jí)代碼編輯軟件(SublimeText3)

熱門(mén)話題

什么是'渲染障礙CSS”？ 什么是'渲染障礙CSS”？ Jun 24, 2025 am 12:42 AM

CSS會(huì)阻塞頁(yè)面渲染是因?yàn)闉g覽器默認(rèn)將內(nèi)聯(lián)和外部CSS視為關(guān)鍵資源，尤其是使用引入的樣式表、頭部大量?jī)?nèi)聯(lián)CSS以及未優(yōu)化的媒體查詢樣式。1.提取關(guān)鍵CSS并內(nèi)嵌至HTML；2.延遲加載非關(guān)鍵CSS通過(guò)JavaScript；3.使用media屬性優(yōu)化加載如打印樣式；4.壓縮合并CSS減少請(qǐng)求。建議使用工具提取關(guān)鍵CSS，結(jié)合rel="preload"異步加載，合理使用media延遲加載，避免過(guò)度拆分與復(fù)雜腳本控制。

什么是AutoPrefixer，它如何工作？ 什么是AutoPrefixer，它如何工作？ Jul 02, 2025 am 01:15 AM

Autoprefixer是一個(gè)根據(jù)目標(biāo)瀏覽器范圍自動(dòng)為CSS屬性添加廠商前綴的工具。1.它解決了手動(dòng)維護(hù)前綴易出錯(cuò)的問(wèn)題；2.通過(guò)PostCSS插件形式工作，解析CSS、分析需加前綴的屬性、依配置生成代碼；3.使用步驟包括安裝插件、設(shè)置browserslist、在構(gòu)建流程中啟用；4.注意事項(xiàng)有不手動(dòng)加前綴、保持配置更新、非所有屬性都加前綴、建議配合預(yù)處理器使用。

什么是圓錐級(jí)函數(shù)？ 什么是圓錐級(jí)函數(shù)？ Jul 01, 2025 am 01:16 AM

theconic-Gradient（）functionIncsscreatesCircularGradientsThatRotateColorStopSaroundAcentralPoint.1.IsidealForPieCharts，ProgressIndicators，colordichers，colorwheels和decorativeBackgrounds.2.itworksbysbysbysbydefindefingincolordefingincolorstopsatspecificains off.

CSS教程，用于創(chuàng)建粘性標(biāo)頭或頁(yè)腳 CSS教程，用于創(chuàng)建粘性標(biāo)頭或頁(yè)腳 Jul 02, 2025 am 01:04 AM

TocreatestickyheadersandfooterswithCSS,useposition:stickyforheaderswithtopvalueandz-index,ensuringparentcontainersdon’trestrictit.1.Forstickyheaders:setposition:sticky,top:0,z-index,andbackgroundcolor.2.Forstickyfooters,betteruseposition:fixedwithbot

CSS自定義屬性的范圍是什么？ CSS自定義屬性的范圍是什么？ Jun 25, 2025 am 12:16 AM

CSS自定義屬性的作用域取決于其聲明的上下文，全局變量通常定義在:root中，而局部變量則定義在特定選擇器內(nèi)，以便組件化和隔離樣式。例如，定義在.card類(lèi)中的變量?jī)H對(duì)匹配該類(lèi)的元素及其子元素可用。最佳實(shí)踐包括：1.使用:root定義全局變量如主題色；2.在組件內(nèi)部定義局部變量以實(shí)現(xiàn)封裝；3.避免重復(fù)聲明同一變量；4.注意選擇器特異性可能引發(fā)的覆蓋問(wèn)題。此外，CSS變量區(qū)分大小寫(xiě)，且應(yīng)在使用前定義以避免錯(cuò)誤。若變量未定義或引用失敗，則會(huì)采用回退值或默認(rèn)值initial。調(diào)試時(shí)可通過(guò)瀏覽器開(kāi)發(fā)者工

CSS教程專(zhuān)注于移動(dòng)優(yōu)先設(shè)計(jì) CSS教程專(zhuān)注于移動(dòng)優(yōu)先設(shè)計(jì) Jul 02, 2025 am 12:52 AM

Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the

CSS教程，用于創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫(huà) CSS教程，用于創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫(huà) Jul 07, 2025 am 12:07 AM

創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種：1.使用邊框的基本旋轉(zhuǎn)器，通過(guò)HTML和CSS實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫(huà)；2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器，通過(guò)不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果；3.在按鈕中添加旋轉(zhuǎn)器，通過(guò)JavaScript切換類(lèi)來(lái)顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問(wèn)性和性能優(yōu)化的重要性，以提升用戶體驗(yàn)。

如何創(chuàng)建本質(zhì)上響應(yīng)的網(wǎng)格布局？ 如何創(chuàng)建本質(zhì)上響應(yīng)的網(wǎng)格布局？ Jul 02, 2025 am 01:19 AM

要?jiǎng)?chuàng)建內(nèi)在響應(yīng)式網(wǎng)格布局，核心方法是使用CSSGrid的repeat(auto-fit,minmax())模式；1.設(shè)置grid-template-columns:repeat(auto-fit,minmax(200px,1fr))讓瀏覽器自動(dòng)調(diào)整列數(shù)并限制每列最小和最大寬度；2.使用gap控制格子間距；3.容器應(yīng)設(shè)為相對(duì)單位如width:100%、配合box-sizing:border-box避免寬度計(jì)算錯(cuò)誤并用margin:auto居中；4.可選設(shè)置行高與內(nèi)容對(duì)齊方式提升視覺(jué)一致性，如row

See all articles