CSS Grid Card

骨架结构

<style>
body{display:flex; flex-direction:row; justify-content:center; align-items:center;}
.wrapper{width:90%; max-width:1240px; margin:0 auto; background-color:#eee;}
.grid-container{display:grid; grid-template-columns:1fr; grid-template-rows:auto; grid-gap:20px;}
@media only screen and (min-width:500px){
  .grid-container{grid-template-columns:repeat(2, 1fr);}
}
@media only screen and (min-width:850px){
  .grid-container{grid-template-columns:repeat(4, 1fr);}
}
</style>

<div class="wrapper grid-container">
  <div class="item">
    <div class="card">
      <div class="thumb"></div>
      <div class="article">
        <h1>post title</h1>
        <p>author</p>
      </div>
    </div>
  </div>
</div>

为临时将制作区域水平垂直居中显示便于观察

body{
  display:flex; 
  flex-direction:row;
  justify-content:center;
  align-items:center;
  background-color:#f8f8f8;
}

为了实现移动端布局，首先给网格容器一个宽度，并让其居中对齐。

.wrapper{
  width:90%;
  max-width:1240px;
  margin:0 auto; 
  background-color:#eee;
}

默认将网格容器的grid-template-columns设置为1fr表示让浏览器自身去计算每个Card区域占据容器多少宽度，由于这里设置的是1fr表示网格项目会自动填充容器。

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

为了实现页面自适应，通过设置媒体查询在更宽的视窗里将更改网格容器的grid-template-columns属性以动态调整列数。比如在宽为500px的容器中每行平均分为两列，而在850px宽的容器中每行则分配四列。

@media only screen and (min-width:500px){
  .grid-container{grid-template-columns:repeat(2, 1fr);}
}
@media only screen and (min-width:850px){
  .grid-container{grid-template-columns:repeat(4, 1fr);}
}

美化卡片

<style>
.card{background-color:#fff;color:#444; text-decoration:none; box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); min-height:100%;}
.flex-container{display:flex; flex-direction:column;}
</style>
<div class="wrapper grid-container">
  <div class="item">
    <div class="card flex-container">
      <div class="thumb"></div>
      <div class="article">
        <h1>post title</h1>
        <p>author</p>
      </div>
    </div>
  </div>
</div>

为卡片设置基本的样式：白色背景、没有下划线的文本并添加一个灰色的阴影效果。

.card{
  background-color:#fff;
  color:#444; 
  text-decoration:none; 
  box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); 
  min-height:100%;
}

将卡片声明为Flexbox弹性盒子容器，使用Flexbox对卡片中的内容在垂直方向上进行排列。

.flex-container{
  display:flex; 
  flex-direction:column;
}

为了使所有卡片的高度和父容器（网格项目）的高度保持一致，因此添加了min-height:100%。

悬浮动画

为增强卡片的交互性，为卡片添加触碰时的悬浮效果。

悬浮动画

<style>
.hover{
  position:relative;
  top:0;
  transition:all .1s ease-in;
}
.hover:hover{
  top:-2px;
  box-shadow:04px 5px rgba(0, 0, 0, 0.2);
}
</style>

<div class="wrapper grid-container">
  <div class="item">
    <div class="card flex-container hover">
      <div class="thumb"></div>
      <div class="article">
        <h1>post title</h1>
        <p>author</p>
      </div>
    </div>
  </div>
</div>

文字排版

为更好的展现卡片内容，需对卡片中的文本内容进行排版处理。

文字排版

<style>
.card .article{
  padding:20px;
}
.article .title{
  margin:0;
  font-size:20px;
  color:#333;
}
.article .content{
  line-height:1.4;
}
.article .author{
  margin:2em 0 0 0;
  font-size:12px;
  font-weight:bold;
  color:#999;
  text-transform:uppercase;
  letter-spacing:.05em;
}
</style>

<div class="wrapper grid-container">
  <div class="item">
    <div class="card flex-container hover">
      <div class="thumb"></div>
      <div class="article">
        <h1 class="title">标题文本</h1>
        <div class="content">正文区域正文区域正文区域正文区域正文区域正文区域正文区域正文区域正文区域正文区域正文区域正文区域</div>
        <div class="author">作者</div>
      </div>
    </div>
  </div>
</div>

背景缩略图

为了使图片缩放缩略图采用背景图片定位的方式实现

<style>
.thumb{ padding-bottom: 60%; background-size: cover; background-position: center center; background-color:#f00;}
</style>

<div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);"></div>

直接将图片地址设置在行内样式中，这种处理也可采用使用data-thumb自定义属性配置JavaScript来设置背景图片的方式。

为确保背景图片尺寸和.thumb元素尺寸相同，需给.thumb处理背景图片样式。

.thumb{ 
  padding-bottom: 60%; 
  background-size: cover; 
  background-position: center center; 
}

优化卡片文本

将卡片作者姓名放置到卡片底部，不管姓名上面有多少内容，它在底部的位置一致保持不变。

优化卡片文本

<style>
.flex-container{
  display:flex; 
  flex-direction:column;
}
.flex-1{
  flex:1;
}
.space-between{
  justify-content;space-between;
}
</style>

<div class="wrapper grid-container">
  <div class="item">
    <div class="card flex-container hover">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);"></div>
      <div class="article flex-1 flex-container space-between">
        <h1 class="title">标题文本</h1>
        <div class="content flex-1">正文区域正文区域正文区域</div>
        <div class="author">作者</div>
      </div>
    </div>
  </div>
</div>

为实现底部位置不变需设置Flexbox项目flex:1，即让弹性项目占据所有可用空间。

article文本内容区域作为Flexbox弹性容器，设置flex-direction:column弹性项目垂直排列，再设置justify-content:space-between是为了让弹性容器中的项目以两端对齐的方式排列，即弹性项目沿着轴线均匀地分布，且具有相等的间距。最后设置content内容部分的flex:1，即可让段落填充所有剩余可用的垂直空间，这样文本就能够很好地顶对齐。

优化网格布局

为着重在多张卡片中重点显示某张特色卡，此时可直接使用Grid网格布局，将特色卡所在的网格进行调整。

例如：将原本占一列的特色卡.item-1，现在修改为占两列。

@media only screen and (min-width:500px){
  .item-1{grid-column:1 / span 2;}
}

完整代码

效果感觉非常不错！！！

卡片布局

<style>
body{display:flex; flex-direction:row; justify-content:center; align-items:center;background-color:#f8f8f8;}
.wrapper{width:90%; max-width:1240px; margin:0 auto; background-color:#eee;}
.grid-container{display:grid; grid-template-columns:1fr; grid-template-rows:auto; grid-gap:20px;}
@media only screen and (min-width:500px){
  .grid-container{grid-template-columns:repeat(2, 1fr);}
  .item-1{grid-column:1 / span 2;}
}
@media only screen and (min-width:850px){
  .grid-container{grid-template-columns:repeat(4, 1fr);}
}

.card{
  background-color:#fff;
  color:#444; 
  text-decoration:none; 
  box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); 
  min-height:100%;
}
.hover{
  position:relative;
  top:0;
  transition:all .1s ease-in;
}
.hover:hover{
  top:-2px;
  box-shadow:04px 5px rgba(0, 0, 0, 0.2);
}
.flex-container{
  display:flex; 
  flex-direction:column;
}
.flex-1{
  flex:1;
}
.space-between{
  justify-content;space-between;
}

.card .article{
  padding:20px;
}
.article .title{
  margin:0;
  font-size:20px;
  color:#333;
}
.article .author{
  font-size:12px;
  font-weight:bold;
  color:#999;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:2em 0 0 0;
}
.article .content{
  line-height:1.4;
}

.thumb{ padding-bottom: 60%; background-size: cover; background-position: center center; background-color:#f00;}
</style>

<div class="wrapper grid-container">
  <div class="item item-1">
    <div class="card flex-container hover">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);"></div>
      <div class="article flex-1 flex-container space-between">
        <h1 class="title">标题文本</h1>
        <div class="content flex-1">正文区域正文区域正文区域</div>
        <div class="author">作者</div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="card flex-container hover">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);"></div>
      <div class="article flex-1 flex-container space-between">
        <h1 class="title">标题文本</h1>
        <div class="content flex-1">正文区域正文区域正文区域正文区域正文区域正文区域正文区域正文区域正文区域正文区域</div>
        <div class="author">作者</div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="card flex-container hover">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);"></div>
      <div class="article flex-1 flex-container space-between">
        <h1 class="title">标题文本</h1>
        <div class="content flex-1">正文区域</div>
        <div class="author">作者</div>
      </div>
    </div>
  </div>
</div>