Logo

菜单

发布于 2026-01-06 3 阅读
0

我如何使用 CSS Grid 进行设计

我如何使用 CSS Grid 进行设计

在向几位之前没用过 CSS Grid 的人介绍之后，我发现大家问的问题并不是 Grid 的实现方式，而是实现之前的部分，也就是布局的实际规划。

如果你读过我之前那篇关于教新手使用 CSS Grid 的文章，我举的一个例子是园艺，也就是精心规划绣球花、玫瑰和郁金香的种植位置。好吧，我可能没太听懂。看来园艺并不是每个人都感兴趣🤷。

但说实话，自从开始使用 CSS Grid 进行设计和构建以来，我发现自己使用纸笔绘制网格布局的次数明显增多。网格语法本身就非常直观，我在教授 Grid 时总是会强调这一点。

看一下简单网格的语法：

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 200px 200px;
}
Enter fullscreen mode Exit fullscreen mode

你可以看出这个网格采用了 3 列 2 行的结构。这一点在使用 时更加明显grid-template-areas，而我也很喜欢 。

.grid {
  display: grid;
  grid-template-columns: 12em 1fr 15em;
  grid-template-rows: 10em 20em 1fr 10em;
  grid-template-areas: 'a a b'
                       'c d d'
                       'c d d'
                       'e e e';
}

.grid-item__a { grid-area: a; }
.grid-item__b { grid-area: b; }
.grid-item__c { grid-area: c; }
.grid-item__d { grid-area: d; }
.grid-item__e { grid-area: e; }
Enter fullscreen mode Exit fullscreen mode

在浏览器中以代码布局的方式可视化网格布局非常直观。这很棒，我认为我们没有任何其他属性能够以这种方式工作。可视化呈现需要可视化工具，而 CSS Grid 正好提供了这种工具。

简而言之，这就是我将静态印刷设计（或者当时我的灵感来源）“网络化”的过程。

  1. 检查原始设计中的所有元素
  2. 将设计图转化为铅笔和纸上的草图
  3. 弄清楚网格需要如何构建，才能使其能够很好地适应不同的视口尺寸。
  4. 根据设计方案，划分柔性轨道和固定轨道。
  5. 开始用代码构建设计，并在浏览器中查看。
  6. 调整轨道大小直到完全煮熟，哦等等，抱歉，这不是一锅芝士辣椒的食谱😏

不过我之前说的调整和微调可不是开玩笑。我调整浏览器窗口大小的频率远超普通网民的正常水平。简直是指数级增长😌。

使用案例：Tycho 艺术家简介

德鲁·沙利文 撰写的泰科艺术家简介
德鲁·沙利文撰写的泰科艺术家简介

我在 Dribbble 上偶然看到了这个设计，立刻心想：嘿，我完全可以把它做成网页，而且不是图片。我对Tycho并不陌生，因为早在 2016 年，我就用他的专辑封面作为灵感，为我在CSSConf.Asia上的首次会议演讲做准备。

检查

这就是我看到可网格化设计时脑海中浮现的画面。
网格结构的总体思路

这个设计可以分成 6 列 4 行。也许你的看法不同，你可能直觉上觉得 5 列或其他布局更合适，这完全没问题。我对设计的理念非常自由，随你发挥，所以只要适合你就可以了。

翻译、结构化和指定

纸笔既便宜又方便。它让我可以在脑海中反复推敲轨道的走向，同时也能帮助我形象地想象最终效果。人们第一次注意到我的网格结构时，经常会问我：为什么我还有从左边数第四列那个可以灵活调整的列？

我喜欢用模拟方式画草图，这种方式很适合我。
网格的铅笔和纸草图

我选择添加一列，以便更好地控制正文和特色图片之间的灵活间距。但CSS的实现方式总是多种多样的，如果你想减少列数，也可以这样做。

终于到了编写代码的时间！

建造

永远先做标记。不管现在的年轻人都怎么做，我始终坚持先做标记。一个有趣的实验（也许对你来说没什么意思，但对我来说绝对值得一试）是看看你的网站在Lynx上的显示效果。这确实能很好地衡量网站内容的结构是否合理。

我觉得挺合理的。
Lynx 浏览器中渲染的网页

接下来是基本的视觉样式设置，比如字体、颜色和文本格式。由于浏览器样式各不相同，我会做一些简单的自定义设置，比如调整边距和内边距，以及默认设置box-sizing。border-box这只是我个人的偏好。

main {
  max-width: 45em;
  margin: 0 auto;
  position: relative;
  padding: 1em;
}

_:-ms-input-placeholder, :root main {
  display: block;
}

h1 {
  font-family: $header-font;
  color: $accent;
  font-size: calc(3em + 7vw);
  margin-bottom: 0.25em;
}

h2 {
  text-transform: uppercase;
  font-size: calc(1em + 0.5vw);
  color: lighten($text, 50%);
  margin-bottom: 1em;
}

hr {
  opacity: 0;
}

.about {
  line-height: 1.3;
  margin-bottom: 1em;
}

a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  color: $text;
  margin-bottom: 2em;
  font-weight: bold;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location {
  text-transform: uppercase;
  line-height: 1.5;
  font-weight: bold;
}

button {
  border: 0;
  background-color: $accent;
  color: $main;
  text-transform: uppercase;
  font-size: 100%;
  padding: 1em 2em;
  position: absolute;
  right: 1em;
  bottom: 1em;
}
Enter fullscreen mode Exit fullscreen mode

基础布局应该使用几乎通用的 CSS，也就是所有浏览器都支持的属性。虽然我一直说网页不需要在每个浏览器里看起来完全一样，但“不完美”可不是什么设计模式，朋友们。这个基础布局可能看起来有点简陋乏味，但是，嘿，如果我想去看 Tycho 的演出，所有信息都在那里，方便我查阅。

香草味的就挺好的，真的。
基本备用布局

现在，我们可以开始体验网格布局的乐趣了。我选择使用像 fr 和视口单位这样的灵活单位，因为我希望布局在空间允许的情况下能够完全填充窗口而不溢出。所以，如果你以前没用过网格布局，看到我的 grid-template-columns 属性可能会觉得有点奇怪。

所有行的高度都与视口高度相关，这可能会有点棘手。我已经记不清最初的数值是多少了，因为调整了好几轮，然后又疯狂地调整浏览器窗口大小，之后又做了更多调整……你应该明白我的意思了。

调整、微调、冲洗、重复

最终我决定采用以下方案：

@supports (display:grid) {
  @media (min-width: 42em) and (min-height: 27em) {
    main {
      max-width: none;
      padding: 0;
      display: grid;
      grid-template-columns: 2fr minmax(10em, max-content) minmax(14em, max-content) minmax(1em, 1fr) fit-content(28em) calc(2em + 0.5vw);
      grid-template-rows: 35vh 40vh 15vh 10vh;
    }

    h1 {
      grid-column: 3 / 6;
      grid-row: 1 / 2;
      z-index: 2;
      padding-left: 0.25em;
      margin-bottom: initial;
    }

    h2 {
      grid-row: 1 / -1;
      grid-column: 6 / 7;
      writing-mode: vertical-rl;
      margin-bottom: initial;
      color: $text;
    }

    hr {
      grid-column: 5 / 6;
      grid-row: 2;
      height: 6px;
      background-color: $text;
      width: 20ch;
    }

    .about {
      grid-column: 5 / 6;
      grid-row: 2;
      align-self: end;
      padding-bottom: 4vh;
      margin-bottom: initial;
    }

    a {
      grid-column: 5 / 6;
      justify-self: end;
      align-self: center;
      margin-bottom: initial;

      &::before {
        content: '';
        display: block;
        height: 4px;
        background-color: $accent;
        width: 4ch;
        margin-bottom: 1em;
      }
    }

    img {
      grid-column: 1 / 4;
      grid-row: 1 / 4;
    }

    .location {
      grid-column: 3 / 4;
      grid-row: 3 / 4;
      z-index: 2;
      background: $main;
      text-align: center;
      display: flex;

      p {
        margin: auto;
      }
    }

    button {
      grid-column: 2 / 3;
      grid-row: 4 / 5;
      position: initial;
      padding: 0;
    }
  }

  @media (min-width: 48em) and (min-height: 27em) {
    hr {
      opacity: 1;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

添加最小高度查询是为了处理主标题下方的黑线。使用视口单位进行布局的问题在于，布局肯定会出现错位的情况。因此，媒体查询至关重要。这样，当上下文不再适用时，就可以切换到其他单位。

以下是最终效果图：

最初的设计灵感在横向视图下效果最佳，仅仅因为它在纵向视图下表现不佳，并不意味着我们就不能借鉴它。我们的工作就是思考如何为动态媒介进行设计，说实话，我觉得这项工作非常有成就感，也很有趣。

还有什么其他媒介能让我们跳出单一维度的思维局限？我们不仅要考虑设计在最新浏览器上的呈现效果，还要考虑它在窄屏或老旧浏览器上的适配性。对我而言，这正是我们这种媒介的独特之处。

总结

我真心相信，CSS Grid凭借其直观而强大的特性，将鼓励设计师和开发者探索更具创意的布局，减少对预设CSS框架的依赖。我不认为CSS框架会消失，它们肯定有其用武之地，但我期待着CSS Grid成为构建网页布局的首选技术的那一天😎。

文章来源：https://dev.to/huijing/how-i-design-with-css-grid-4l3o
今年我的学习计划制定过程：动机、期...
当我拖延处理非编码任务时，我的软件...