CSS 栅格

最新推荐文章于 2024-07-18 11:31:54 发布

原创最新推荐文章于 2024-07-18 11:31:54 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS栅格布局的基本概念及其使用方法，包括显示方式、行列定义、内容对齐等核心特性，并提供了多个示例帮助理解。

CSS 栅格layout逻辑

跟通过table划分不同的sessions不同, 栅格layout是通过CSS的方法换分不同的栅格, 所以under the hook, 画出来的栅格是等分的

比如
asymmetric-annotated

这个就不是等分了, 也就不能这么分

 surdas biography in english

使用规则

.wrapper {
  display: grid;
}

怎么划分

指定大小

  .wrapper {
    display: grid;
    grid-template-columns: 25% 75%;
  }

另外只用指定大小, 但是如果这个比例不能填充content的话, 就不会变小

 .wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

指定其中一个大小, 其它按照比例

.wrapper {
    display: grid;
    grid-template-columns: 200px 2fr 1fr;
}

Implicit rows

这个跟flex-wrap类似

<style>
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
</style>

<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Explicit rows

这个就是把每一行的固定了

<style>
  .wrapper {
    display: grid;
    grid-template-rows: 64px 1fr 100px;
    min-height: 100%;
  }
</style>

<div class="wrapper">
  <header>My Website</header>
  <main>Content goes here</main>
  <footer>Copyright notice</footer>
</div>

超出范围的item

<style>
  .wrapper {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    height: 100vh;
  }
</style>

<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Gaps

<style>
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
</style>

<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

repeat

.calendar {
  grid-template-columns:
    250px 1fr 1fr 1fr 1fr 1fr;
}

Alignment

justify-content

对column的alignment

<style>
  .wrapper {
    display: grid;
    justify-content: center;
  }
</style>

<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

justify-items

对item本身的调整

<style>
  .wrapper {
    display: grid;
    justify-items: center;
  }
</style>

<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

align-content

对row的alignment

<style>
  .wrapper {
    display: grid;
    align-content: space-between;
    height: 300px;
  }
</style>

<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

<style>
  .wrapper {
    display: grid;
    align-content: center;
    height: 300px;
  }
</style>

<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

align-items

就是对于item的alignment

<style>
  .wrapper {
    display: grid;
    height: 300px;
    align-items: center;
    border: 2px solid pink;
  }
</style>

<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

Self-alignment

针对单个的alignment

Grid Areas

通过grid-template-areas and grid-area 设计layout

<style>
.wrapper {
  display: grid;
  grid-template-areas:
    'sidebar header'
    'sidebar main-content';
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 2fr;
}

aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
main {
  grid-area: main-content;
}
</style>

<div class="wrapper">
  <aside>Aside</aside>
  <header>Header</header>
  <main>Main</main>
</div>

Fluid Grids

根据viewport的小换行

<style>
  .grid {
    display: grid;
    gap: 16px;
    grid-template-columns:
      repeat(auto-fill, minmax(150px, 1fr));
  }
</style>

<main class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</main>