css变量（--）、grid布局应用（两栏、三栏、圣杯布局）

最新推荐文章于 2023-05-17 16:57:26 发布

原创最新推荐文章于 2023-05-17 16:57:26 发布 · 737 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css变量--详解 #grid布局应用 #圣杯布局grid实现 #两栏布局、三栏布局grid实现 #grid详解

CSS 专栏收录该内容

17 篇文章

订阅专栏

本文深入介绍了CSS变量(--)的应用，展示了如何使用Grid布局实现空间居中、垂直两栏、水平三栏和圣杯布局的经典设计。通过实例和阮一峰的网络日志，读者将掌握Grid布局的关键概念和实用技巧。

css变量（--）

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

由于$foo被 Sass 用掉了，@foo被 Less，故css变量采用--开头避免冲突。

CSS 变量教程 - 阮一峰的网络日志

Grid布局应用

空间居中

.container {
    display: grid;
    place-items: center;
}

垂直两栏布局

.container {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

水平三栏布局

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

圣杯布局

<header><h1 contenteditable>Header</h1></header>
<div class="left-sidebar">Left Sidebar</div>
<main>main</main>
<div class="right-sidebar">Right Sidebar</div>
<footer>Footer</footer>

.container {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  grid-column: 1 / 4;
}

.left-sidebar {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-sidebar {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}