社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > css教程 > 重新设计站点以使用CSS网格布局

重新设计站点以使用CSS网格布局

Jennifer Aniston
发布： 2025-02-15 08:45:12
原创
372 人浏览过

重新设计站点以使用CSS网格布局

在本文中，我们将通过创建响应迅速的多列网站布局来查看CSS电网。 如今，CSS网格是网络开发的新趋势。忘了桌子布局和浮点：设计网站的新方法已经在这里！这项技术引入了二维网格，该网格定义了使用少数CSS规则的布局多个区域。

>网格可以制造第三方框架，例如960GS或Bootstrap Grid冗余，因为您可以轻松地自己完成所有操作！尽管Internet Explorer实现了规格的较旧版本，但此功能都得到了所有主要浏览器的支持。

>

如果您是网格布局的新手，请查看我们的初学者指南CSS网格指南。

钥匙要点

> css网格布局简化了多列布局的创建，消除了对诸如浮子和显示桌子之类的旧技术的需求。> 与传统的CSS框架（如Bootstrap）相比

CSS网格的实现涉及定义一个具有显示的容器：网格，设置列和行，并使用简单的CSS规则将元素放入指定的网格区域。

> CSS网格本质上反应灵敏，可以使用最小的媒体查询对不同屏幕尺寸的内容进行轻松重组。

对于不完全支持CSS网格的浏览器，例如Internet Explorer，使用内联块和媒体查询的后备样式可确保布局仍然有效地呈现。
    > CSS网格和Flexbox可以合并以满足复杂的设计要求，展示CSS电网在现代网络设计中的兼容性和多功能性。
    • 我们要构建的
    • 因此，我们被要求创建一个典型的网站布局，其中包含标头，主内容区域，右侧侧边栏，赞助商列表和页脚：>
    • >另一个开发人员已经尝试解决此任务，并提出了一个涉及浮点，显示的解决方案：表格和一些Clearfix Hacks。我们将这种现有布局称为“初始”：>
  • 请参阅Pen SP：codepen上的sitepoint（@sitepoint）的浮子的多柱布局。
  • 直到最近，浮子被认为是创建这种布局的最佳选择。在此之前，我们必须使用HTML表，但是它们有许多缺点。具体而言，此类布局非常僵化，需要大量标签（表，TR，TD，TH等），而这些标签则使用这些标签来显示表数据，而不是设计布局。

    ，但是CSS继续发展，现在我们有了CSS网格。从概念上讲，它类似于旧的表布局，但可以使用具有更灵活的布局的语义HTML元素。

    计划网格

    首先：我们需要为文档定义基本的HTML结构。在此之前，让我们简要讨论最初的示例如何工作。它具有以下主要块：

    • 。
      • .Main-Header是包含.logo（占据20％的空间，漂浮在左侧的20％）和.main-menu（占据79％的空间，漂浮在右侧的79％）的标题。标题还分配了一个骇客修复程序以清除浮子。
      • .content-area-wrapper包装主.CONTENT-AREA（占据了66.6％的空间，负1REM保留了边缘，左侧漂浮在左侧）和.sidebar（占据了33.3％的空间，漂浮在右边的33.3％ ）。包装器本身也用clearfix分配了。
      • .sponsors-wrapper包含赞助商的徽标。在内部，有一个.spors部分，其中包含显示属性为表。每个赞助商依次显示为表单元格。
      • .footer是我们的页脚，并且跨越了100％的空间。
      • 我们的新布局将与最初的布局非常相似，但是除了一个例外：我们不会添加.main-header和.content-area-area-wrapper包装器，因为不再需要clearfix。这是html的新版本：

    请注意，您可以将身体用作全局.Container；在这种情况下，这只是偏爱的问题。总而言之，我们有六个主要领域：
    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    徽标
    1. 菜单
    2. 主要内容
    3. sidebar
    4. 赞助商
    5. >页脚
      7. 通常建议您实施一种移动优先的方法。也就是说，您是从移动布局开始的，然后为大屏幕添加样式。在这种情况下，这不是必需的，因为我们正在调整初始布局，该布局已经回到了小屏幕设备上的线性视图。因此，让我们首先关注电网的实现，然后再讨论响应能力和后备规则。因此，返回我们的计划，看看如何安排网格列：>

    >所以，我建议拥有三列（以红色突出显示）和四行（以蓝色突出显示）。某些区域（例如徽标）将仅占据一列，而其他区域（如主内容）将跨越多列。稍后，我们可以轻松修改布局，移动周围的区域或添加新的区域。重新设计站点以使用CSS网格布局>

    遵循该方案，给每个区域一个唯一的名称。这些将用于以下定义的布局：

    >

    >现在将显示属性设置为网格，定义三列，并在主容器的左侧和右侧添加少量边距：

    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    显示：网格定义一个网格容器，并为其孩子设置特殊的格式上下文。 FR是一个特殊的单元，意思是“网格容器的自由空间的一部分”。 2 6 4给我们12，而6/12 = 0.5。这意味着中间的列将占据自由空间的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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    完成此操作，我们可以与各个领域合作。但是，在结束本节之前，让我们快速添加一些常见的样式：

    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    好！现在，我们可以前往第一个目标，这将是标题。>

    设计标题

    >我们的标头占据了第一行，该排应该将特定的高度设置为3REM。在初始布局中，通过为标头包装器分配高度属性来解决：>

    >还请注意，徽标和菜单垂直与中间对齐，这是使用线路高技巧实现的：

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    使用CSS网格，事情将变得更简单：我们不需要任何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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    从定义第一行开始：

    我们的徽标应仅占据一列，而菜单应跨越两个列。我们可以借助网格 - 板序列属性来表达我们的意图，该属性引用了上面分配的网格区域名称：> 

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    这是怎么回事？好吧，通过说徽标仅一次，我们确保它仅占用一个徽标 - 最左侧的专栏。菜单菜单意味着菜单占有两列：中间和最正确的一列。看看这个规则有多简单！

    >

    现在，在y轴上对齐徽标：
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    菜单应垂直居中并向右拉动：>

    >我们的菜单是使用UL和LI标签构建的，因此，我们还通过删除标记，无效的边距/拨片并将菜单设置为Flex容器来对它们进行一些样式。 
    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制

    >就是这样。为了观察结果，我将使用启用方便的CSS网格荧光笔工具使用Firefox。 （对于其他浏览器也有类似的工具：例如，Chrome的Gridman。）要访问此工具，请按F12并选择.Container元素，该元素应该具有网格标签：

    > 
    <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>
    登录后复制
    之后，继续进行CSS规则选项卡，并找到显示：网格属性。通过按在网格值旁边的小图标上，您可以启用或禁用荧光笔：

    重新设计站点以使用CSS网格布局

    这是结果：

    重新设计站点以使用CSS网格布局

    荧光笔显示您的所有行和列以及它们与区域名称之间的边距。您可以自定义布局部分中的输出，该输出还列出了页面上的所有网格：>

    重新设计站点以使用CSS网格布局

    >所以，我们已经处理了标题，所以让我们继续前往主要内容区域和侧边栏。

    主内容和侧边栏

    >我们的主要内容区域应跨两列，而侧边栏应仅占据一列。至于行，我希望它的高度自动设置。我们可以相应地更新.CONTAINER网格：

    > 

    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >我想为侧边栏添加一些填充物，以提供更多的视觉空间：>

    这是结果，如Firefox的网格工具中所述： 
    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    赞助商重新设计站点以使用CSS网格布局

    赞助商部分应包含五个具有相等宽度和高度的项目。每个项目依次都会有一个图像。

    在初始布局中，此块的样式是显示：表格，但我们不会依靠它。实际上，赞助商部分也可能是应用CSS网格的绝佳候选人！

    首先，调整网格 - 板截面以包括赞助商区域：

    现在，将.sponsors部分也变成一个网格：

    只要我们需要五个具有相等宽度的项目，重复（）函数就可以用于定义列：> 
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    对于行，应自动设置其高度。列之间的差距应等于1REM：

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    样式每个项目：

    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    >此示例说明您可以嵌套网格而没有任何问题。另一个解决方案可能是使用Flexbox，但是在这种情况下，如果没有足够的宽度，则赞助商可能会包装。
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >

    >现在，我想将图像垂直和水平居中。我们可能会尝试执行以下操作：

    重新设计站点以使用CSS网格布局位置对X和Y轴上的元素对齐。这是对自己的速记属性和自我合理的。

    >

    图像确实会对齐，但不幸的是，白色背景消失了。这是因为每个赞助器现在的宽度和高度等于图像的尺寸：> 

    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    这意味着我们在这里需要另一种方法，并且可能的解决方案之一是采用flexbox：>

    现在，一切都正确显示了，现在我们知道网格与flexbox效果很好：

    重新设计站点以使用CSS网格布局

    >页脚

    我们的最后一部分是页脚，实际上是最简单的部分。我们要做的就是将其跨到所有三列：> 

    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    基本上，布局已经完成！但是，我们还没有完成：该网站也必须响应迅速。因此，让我们在下一节中照顾这项任务。

    >

    使布局响应

    有CSS网格，实际上很容易引入响应能力，因为我们可以快速重新定位这些区域。

    大屏幕

    >让我们从大屏幕开始（在本文中，我将坚持与Bootstrap 4中定义的相同的断点）。我想降低主容器的水平边缘和单个赞助商之间的差距：

    中等屏幕
    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    >在中屏幕上，我希望主内容区域和侧边栏占据所有三列：

    >还要降低字体尺寸并堆放赞助商，以便它们在另一个下方显示。列之间的差距应为零（因为实际上只有一个列）。相反，我将在行之间设置差距：
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    这是现在中屏幕上的布局外观：
    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    重新设计站点以使用CSS网格布局小屏幕

    >在小屏幕上，我们将在单独的一行上显示每个区域，这意味着现在只有一个列：>

    在这种情况下，不应将菜单拉到右侧，我们也不需要列之间的差距：

    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    请注意，您甚至可以在各种屏幕上轻松地重新排列网格项目。假设我们想将菜单放在小屏幕上的菜单（以便访问者在页面上完成阅读材料后不必滚动）。为此，只需调整网格 - 板序列：

    重新设计站点以使用CSS网格布局

    在没有媒体查询的情况下做

    >值得一提的是，我们可以使赞助商完全不受任何媒体疑问而阻止响应。在自动拟合属性和MinMax功能的帮助下，这是可能的。要查看它们的行动，请调整这样的赞助商的样式：
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >

    您已经知道，重复功能在必要时重复了多次列。

    自动填充意思是“用尽可能多的列填充行”。如果列没有足够的空间，则将其放置在下一行。

    > 
    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    minmax允许我们指定列宽度的最小值和最大值。在这种情况下，每列应跨越1个自由空间的一部分，但不少于200个像素。

    所有这些意味着在较小的屏幕上，列可以缩小到最多的200px。如果仍然没有足够的空间，则将移动一条或多个列。这是应用上述CSS规则的结果：

    重新设计站点以使用CSS网格布局

    后备

    不幸的是，所有浏览器尚未完全支持CSS网格，您可能会猜测哪个仍在实现规范的较旧版本。是的，它是Internet Explorer 10和11。如果您在这些浏览器中打开演示，您会发现网格根本不起作用，并且这些区域只是堆叠的：

    >

    重新设计站点以使用CSS网格布局

    当然，这不是世界末日，因为该网站仍然可用，但至少添加一些后备规则。好消息是，如果元素被漂浮并也已分配，则网格优先。另外，显示器，垂直空间和其他某些属性也对网格项目没有影响，因此让我们利用这一事实。

    >堆叠的菜单看起来不错，但是侧边栏可能应放在主要内容旁边，而不是下面。我们可以使用显示：inline-block：

    在所有支持网格的浏览器中，这些属性都不会效果，但是在IE中，它们将按预期应用。我们需要调整的另一项属性是宽度：

    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >但是，添加了这些样式后，我们的网格布局现在看起来会更糟，因为网格项目不忽略宽度属性

    >。可以借助@supports CSS查询来解决。 IE不了解这些查询，但不需要：我们将使用它来修复网格！

    > 
    <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>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    现在，让我们照顾赞助商项目，并为每个块添加一些最高边距：> >在支撑网格时我们不需要任何最高边距，因此将其在@supports查询中无效：

    > 
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    最后，让我们为IE添加一些响应能力。我们只需将主要内容，侧边栏和每个赞助商拉伸到较小屏幕上的全宽度：

    > 

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    不要忘记修复支持网格的浏览器的赞助商的宽度：

    这是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上查看最终结果：

    请参阅pen sp：codepen上的sitepoint（@sitepoint）带网格的多柱布局。
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    结论

    在本文中，我们看到了CSS网格在作用中，并利用了它来重新设计现有的基于浮点的布局。比较这两种解决方案，我们可以看到“网格”解决方案的HTML和CSS代码较小（当然不计算后备），更简单且更具表现力。借助网格 - 板块区域属性，很容易理解如何布置各个区域，我们可以快速重新定位它们或调整其尺寸。最重要的是，我们不需要依靠诸如clearfix等各种骇人听闻的技巧。

    >

    >因此，如您所见，CSS网格是浮子的绝佳选择，并且已经准备好生产了。您可能需要为Internet Explorer提供一些后备规则（这实现了规范的较旧版本），但是如您所见，它们并不是很复杂，并且通常仍然可以使用该站点全部。

    您是否已经尝试使用CSS网格创建网站？您的印象是什么？在评论中分享您的想法！

    经常询问有关CSS电网改造的问题

    > CSS网格改造在Web设计中的重要性是什么？这是一个二维系统，这意味着它可以处理列和行，这与Flexbox不同，这在很大程度上是一个维系统。这使其成为创建适应不同屏幕尺寸和分辨率的响应设计的多功能工具。它还简化了在容器中的项目中对齐和分配空间的过程，即使它们的大小是未知或动态的。由于其灵活性和易用性，改造从其他网格系统中脱颖而出。与其他需要大量编码和计算的系统不同，CSS网格改造使开发人员可以使用最小的代码创建复杂的布局。它还提供了对元素的放置和对齐的更多控制权，使其成为许多开发人员的首选选择。

    我可以将CSS网格改造用于移动响应设计吗？是创建移动响应设计的绝佳工具。它允许开发人员使用媒体查询为不同的屏幕尺寸定义不同的网格布局。这意味着您可以为桌面视图创建一个复杂的布局，以及用于移动视图的更简单，更简化的布局，所有这些布局都在同一CSS文档中。

    CSS Grid Retrofit的浏览器兼容性问题是什么？ >

    CSS网格改造与大多数现代浏览器兼容，包括Chrome，Firefox，Safari和Edge。但是，在较旧的浏览器或版本中，它可能无法正常工作。在多个浏览器中测试您的设计始终是一个好习惯，以确保其按预期工作。

    >如何开始在项目中使用CSS网格改造？

    >开始使用CSS网格改造，您需要将容器元素定义为带有显示的网格：Grid：grid。然后，您可以使用网格 - 板块柱和网格 - 板条排定义列和行大小，并将其子元素与网格元素一起使用网格和网格 - 列和网格行。使用其他布局方法网格改造？

    是的，可以将CSS网格改造与其他布局方法（如Flexbox）结合使用，例如Flexbox，以进行更复杂的设计。当您要创建一个部分灵活且部分固定的布局时，这可能特别有用。改造包括使用命名网格区域，以更容易布局管理，使用FR单元进行灵活的网格轨道以及在浏览器的开发人员工具中使用网格检查器可视化和调试网格布局。

    元素？

    css网格改造允许元素重叠，这可以是创建唯一布局的强大工具。您可以控制与z index属性重叠元素的堆叠顺序。

    我可以将CSS网格改造用于垂直布局吗？

    是的，是的，CSS Grid Raturofit是一个二维系统，是二维系统，这意味着它可以处理列和行。这使其成为创建水平和垂直布局的多功能工具。

    >

    >在使用CSS网格改造时，有哪些共同挑战？

    >在与CSS网格翻新时有一些共同的挑战包括处理浏览器兼容性问题，处理重叠元素以及在许多网格区域管理复杂布局。但是，通过实践和对网格属性的良好理解，可以克服这些挑战。

以上是重新设计站点以使用CSS网格布局的详细内容。更多信息请关注PHP中文网其他相关文章！

上一篇：AI：机器人反击！ 下一篇：自定义bootstrap jQuery插件
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2769
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2904
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2427
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
2332
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2413
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板