CSS网格布局笔记[转]

最新推荐文章于 2024-04-02 23:59:19 发布

NGC_2070

最新推荐文章于 2024-04-02 23:59:19 发布

阅读量1.7k

点赞数 1

分类专栏： # HTML与CSS进阶文章标签： css css3 前端

原文链接：https://space.bilibili.com/386350896/channel/collectiondetail?sid=50097

版权

HTML与CSS进阶专栏收录该内容

42 篇文章 0 订阅

订阅专栏

CSS网格布局笔记[转]

参考：CSS Grid教程第1集 - 创建网格容器_哔哩哔哩_bilibili
https://codepen.io/brandonzhang
https://codepen.io/brandonzhang/pen/MWEYrrJ
查看网格布局线条：

开发者工具独立窗口：

创建网格容器

示例1：

示例2：

fr单位和repeat()函数示例1：

示例2

示例3：

网格单元和网格区域

示例1：

示例2：

示例3：

示例3：

示例4：

解决空白区域：

网格轨道中使用minmax()函数

示例1：

示例2：

网格对齐 justify-items & align-items

示例1：默认情况:

示例2：

示例3：

示例4：

示例5：

示例6：

示例7：

元素对齐 justify-self & align-self

示例1：

示例2：

网格元素重叠和z-index

示例：

通过网格线查看：

图片设置：

完整代码：

<main class="grid">
  <div class="img1">
    <img src="https://res.cloudinary.com/brandonzhang/image/upload/v1638360903/brandonzhang.cn/462030_rwbdc2.jpg" alt="">
  </div>
  <div class="text1">
    <h2>Place</h2>
    <p>Proin id dignissim lectus, vitae hendrerit mi. </p>
  </div>
  <div class="img2">
    <img src="https://res.cloudinary.com/brandonzhang/image/upload/v1638360903/brandonzhang.cn/462031_hyh3ny.jpg" alt="">
  </div>
  <div class="text2">
    <h2>Place</h2>
    <p>Proin id dignissim lectus, vitae hendrerit mi. </p>
  </div>
  <div class="img3">
    <img src="https://res.cloudinary.com/brandonzhang/image/upload/v1638360903/brandonzhang.cn/462032_kshgad.jpg" alt="">
  </div>
  <div class="text3">
    <h2>Place</h2>
    <p>Proin id dignissim lectus, vitae hendrerit mi. </p>
  </div>
  <p class="content">
    Proin id dignissim lectus, vitae hendrerit mi. Sed egestas est turpis, ac pretium nisl elementum ac. Nunc et risus sit amet sem malesuada lobortis. Fusce vestibulum, purus vitae euismod lacinia, nunc odio maximus metus, eu suscipit ex est sed nunc. Aliquam vel diam sit amet quam laoreet vehicula. Etiam tortor lectus, tempor quis luctus eu, tristique eget mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  <br><br>
Nullam aliquam mollis lorem eu feugiat. Vivamus eleifend diam vel libero pharetra vehicula. Fusce sit amet enim elit. Suspendisse et fringilla ligula. Pellentesque ac quam sapien. Duis tincidunt mattis ipsum, ut mollis quam maximus vel. Integer a lacus mauris. 
  </p>
</main>

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
* {
  box-sizing: border-box;
}
body {
  font-family: Lato;
  font-size: 0.8rem;
  padding: 2rem;
}
h2 {
  margin-bottom: 0;
}
p {
  margin-top: 0.1em;
}

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

.grid {
  display: grid;
  grid-template-columns: 20ch 1fr  calc(20ch + 1rem) 1fr 2rem minmax(15ch, 30ch);
  grid-template-rows: 25vh 20vh 10vh 15vh 15vh;
}

.img1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
  
}

.text1 {
  grid-column: 1;
  grid-row: 4;
}

.img2 {
  grid-column: 2 / span 2;
  grid-row: 3 / -1;
  border: 0.5rem solid white;
  z-index: 1;
}

.text2 {
  grid-column: 1;
  grid-row: 5;
}

.img3 {
  grid-column: 3 / span 2;
  grid-row: 2 / span 2;
  padding-left: 1rem;
}

.text3 {
  grid-column: 3;
  align-self: end;
  padding-left: 1rem;
}

.content {
  grid-column: 6;
  grid-row: 2 / span 4;
  font-size: 0.8rem;
  
}

auto-fit和minmax创建灵活轨道

flex示例：

grid示例：

auto-fill 与 auto-fit

命名网格区域并在媒体查询中更换布局

<header>Header / 页眉</header>
<main>Content / 正文</main>
<footer>Footer / 页脚</footer>

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
* {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas:
    "header content"
    "header content"
    "header footer";
}

@media (max-width: 768px) {
  body {
    grid-template-areas:
      "header  header"
      "content content"
      "footer  footer";
  }
}

header {
  grid-area: header;
}

main {
  grid-area: content;
}

footer {
  grid-area: footer;
}

body {
  font-family: Lato;
  margin: 0;
  min-height: 100vh;
  gap: 1rem;
  font-size: 2rem;
  color: white;
  text-align: center;
}

body > * {
  background-color: #21BBD4;
  padding: 1rem 2rem;
}
header {
  background: #4ECB71;
}
main {
  background: #D99BFF;
}
footer {
  background: #85B6FF;
}

命名网格线并使用命名线布局

示例：

<section>
  <div class="full-width">
    I'm a full-width content!<br>
    全屏
  </div>
  
  <div class="wide-width">
    I'm a wide-width content!<br>
    宽屏
  </div>
  
  <div class="narrow-width">
    I'm a narrow-width content!<br>
    窄屏
  </div>
</section>

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
* {
  box-sizing: border-box;
}

section {
  display: grid;
  grid-template-columns: [full-start] 2rem [wide-start] 4rem [narrow-start] 1fr [narrow-end] 4rem [wide-end] 2rem [full-end];
}

.full-width {
/*   grid-column-start: full-start;
  grid-column-end: full-end; */
/*   grid-column: full-start / full-end; */
  grid-column: full;
}

.wide-width {
  grid-column: wide;
}

.narrow-width {
  grid-column: narrow;
}

.full-width {
  background: #D99BFF;
}

.wide-width {
  background: #FF9790;
}

.narrow-width {
  background: #4ECB71;
}

body {
  font-family: Lato;
  margin: 0;
  min-height: 100vh;
  gap: 1rem;
  font-size: 1rem;
  color: white;
  text-align: center;
}

section > * {
  padding: 1rem 2rem;
}

对齐网格轨道align-content & justify content

示例1：

示例2

minmax(min(100%, 300px), 1fr) 省去媒体查询

使用媒体查询

不使用媒体查询：

适合练手的CSS Grid小游戏

Grid Garden - A game for learning CSS grid layout

display: contents

隐式网格

示例：

CSS Grid Generator

引入自定义属性(Custom Properties)

/* stripe网站：https://stripe.com/en-gb-us/about */
/* 移动端优先设计理念 Mobile First Design */
.customers-grid {
  margin: 0 auto;
  padding: 0 20px;
  margin: 20px 0;
  max-width: 1040px;
  --has-columns: 2;
  --has-rows: calc(12 / var(--has-columns));
  
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(var(--has-columns), 1fr);
  grid-template-rows: repeat(var(--has-rows), 1fr);
}

/* 当屏幕宽度大于600px时 */
@media (min-width: 600px) {
  .customers-grid {
/*     grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr); */
    --has-columns: 3;
/*     --has-rows: 4; */
  }
}

/* 当屏幕宽度大于800px时 */
@media (min-width: 800px) {
  .customers-grid {
/*     grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr); */
    --has-columns: 4;
/*     --has-rows: 3; */
  }
}

学习slack.com网格布局

代码：

<main class="cards">
  
  <div class="card full">
    ONE
  </div>
  <div class="card full">
    TWO
  </div>
  <div class="card">
    THREE
  </div>
  <div class="card">
    FOUR
  </div>
  
  <div class="card">
  </div>
  
</main>

.cards {
    display: grid;
    grid-template-areas:
      "one two three"
      "one two four";
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 100px) 100px;
    gap: 1rem;
    padding: 2rem;
}

.card.full:nth-of-type(1) {
  grid-area: one;
}

.card.full:nth-of-type(2) {
  grid-area: two;
}

.card:nth-of-type(3) {
  grid-area: three;
}

.card:nth-of-type(4) {
  grid-area: four;
}

@media (max-width: 800px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 580px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "one one"
      "two two"
      "three four";
    grid-template-rows: repeat(2, 200px) repeat(2, 100px);
  }
}

@media (max-width: 400px) {
  .cards {
    grid-template-columns: 1fr;
    grid-template-areas:
      "one"
      "two"
      "three"
      "four";
    grid-template-rows: repeat(2, 200px) repeat(3, 100px);
  }
}


/* 本次视频不会再次用到的代码放在底部 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Lato;
  background-color: #F8F9FA;
  color: #333;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}


img {
    max-width: 100%;
    border-radius: 10px;
    height: 150px;
    width: 100%;
    object-fit: cover;
}

.card {
  box-shadow: 0 2px 40px rgba(0 0 0 / 15%);
  background-color: #D99BFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding: 1rem;
}

inline-grid

代码：

<h1>修改密码</h1>
<div class="field">
  <label for="firstname">
    旧密码
  </label>
  <input 
    id="firstname" 
    type="password" 
    name="firstname"
    placeholder="请输入旧密码">
</div>
<div class="field">
  <label for="phone">
    新密码
  </label>
  <input 
    id="phone" 
    type="password" 
    name="phone"
    placeholder="请输入新密码">
</div>

<div class="wrap">
<div class="container">
  <button class="button button--confirm">
  确认修改
  </button>
  <button class="button button--cancel">
  取消
  </button>
</div>
</div>

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100vh;
  background-color: #234;
  font-family: 'Lato';
  padding: 4vmin;
}

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
/*   margin: 0 auto; */
}

.wrap {
/*   text-align: center; */
/*   display: flex;
  justify-content: center; */
  display: grid;
  place-content: center;
}

.button {
  background: #069ccd;
  outline: none;
  border: none;
  padding: .5rem 2rem;
  border-radius: 1rem;
  color: white;
  cursor: pointer;
  text-align: center;
}


h1 {
  color: white;
  text-align: center;
}



.button--cancel {
  background-color: white;
  border-color: #069ccd;
  color: #234;
}


.field {
  width: 100%;
  margin-inline: auto;
  font-family: 'Roboto', sans-serif;
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 12px 20px;
}

label {
  font-size: 16px;
  color: white;
}

input {
  font-size: 16px;
  width: 100%;
  margin-top: 6px;
  border: none;
  padding-inline: 0;
  background: transparent;
}

.field {
  margin-bottom: 1rem;
}

input:focus-visible {
  border: none;
  outline: none;
}

input:focus::placeholder {
  opacity: 0;
}

NGC_2070

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS网格布局笔记[转]

CSS网格布局笔记[转]参考：CSS Grid教程第1集 - 创建网格容器_哔哩哔哩_bilibili https://codepen.io/brandonzhang https://codepen.io/brandonzhang/pen/MWEYrrJ 查看网格布局线条：开发者工具独立窗口：创建网格容器示例1：示例2：fr单位和repeat()函数示例1：示例2示例3：网格单元和网格区域示例1：示例2：示例3...
复制链接

扫一扫