css grid layout in practice

css grid layout in practice

https://caniuse.com/#search=grid

subgrid

https://caniuse.com/#search=calc

tutorials

https://css-tricks.com/snippets/css/complete-guide-grid/

grid & animation

https://codepen.io/xgqfrms/pen/jOEEOWg

grid & function

https://css-tricks.com/snippets/css/complete-guide-grid/#article-header-id-4

https://codepen.io/xgqfrms/pen/JjoojYN

grid layout

https://codepen.io/webgeeker/pen/GRgRVBZ

<!-- CSS Grid -->
<h1 class="title">CSS GRID</h1>
<div class="wrapper">
    <div class="header">HEADER</div>
    <div class="menu">MENU</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 水平 12 col 布局 */
    grid-template-rows: 40px 100px 40px;
    /* 垂直，3 row 高度 */
    /* overflow: auto; */
}

.wrapper > div {
    padding-left: 20px;
    color: #ffeead;
    display: flex;
    align-items: center;
    font-size: 20px;
    /* min-width: 200px; */
}

.header {
    grid-column: span 12;
}

.menu {
    grid-column: span 4;
}

.content {
    grid-column: span 8;
}

.footer {
    grid-column: span 12;
}

@media screen and (max-width: 480px) {
    .header {
        grid-column: span 6;
    }
    
    .menu {
        /* 指定所在的 row 为 1 */
        grid-row: 1;
        grid-column: span 6;
    }
    
    .content {
        grid-column: span 12;
    }
}

grid container

...

grid item

css grid & fallback

https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

https://codepen.io/webgeeker/pen/LYEPqwe

* { box-sizing: border-box; }

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 1.4em Arial, sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 20px;
}

.grid > * {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.5);
  border-radius: 5px;
  background-color: rgba(233,78,119,.5);
  color: #fff;
  float: left;  
  width: 33%;
}

@supports (display:grid) {
  .grid > * {
    width: auto;
  }
}

https://zellwk.com/blog/calendar-flexbox-fallback/

@supports

特征检测, flexbox 渐进增强(grid 优雅降级)

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

https://caniuse.com/#search=@supports

/*  flexbox 渐进增强 */

.day-of-week,
.date-grid {
  display: flex;
}

/* grid  优雅降级 */

@supports (display: grid) {
  .day-of-week,
  .date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .date-grid button:first-child {
    grid-column: 6;
  }
}

CSS3 Grid Layout

http://www.csstutorial.org/css-grid-tutorial.html

https://www.cnblogs.com/xgqfrms/p/10771746.html

https://www.cnblogs.com/xgqfrms/p/10896992.html

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---