美文网首页
display: grid布局

display: grid布局

作者: royluck | 来源:发表于2022-08-29 10:59 被阅读0次
.footer-container {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  color: var(--white);
}

@media only screen and (max-width: 998px) and (min-width: 768px){
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
    .footer-center:last-child{
      /* 列合并 */
      grid-column: 1 / span 2;
    }

  }
}

@media only screen and (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}
image.png @media only screen and (max-width: 998px) and (min-width: 768px) @media only screen and (max-width: 768px)

相关文章

  • Grid布局相关属性

    定义display:grid或inline-grid开启子元素的Grid布局。 不同于flex布局,grid布局是...

  • grid 网格布局实用

    父容器 display: grid; display: inline-grid;设为网格布局以后,容器子元素(项...

  • grid布局

    一、容器属性:display:grid ;网格布局display:inline-grid ;行内 // 网格列宽g...

  • Grid布局(二)基础使用

    基础使用 1. display属性 需要通过display: grid;设置div采用Grid布局,作为网格容器;...

  • [2020-08-10]css3中的常用几种布局

    div的水平垂直居中 flex布局,使用display: flex实现水平垂直居中 grid布局 使用grid布局...

  • dispaly:grid 与 dispaly:flex

    display:grid; 一:常见的容器属性 1、display:grid定义一个容器属性为网格布局2、grid...

  • Grid布局参考资料

    张鑫旭-写给自己看的display: grid布局教程阮一峰-CSS Grid 网格布局教程 在Grid布局中,f...

  • display:grid; 布局

    Grid的由来 CSS一直用来布局网页,但一直都不完美。 一开始我们使用table 做布局,然后转向浮动、定位以及...

  • display:grid 布局

    http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutori...

  • display: grid布局

网友评论

      本文标题:display: grid布局

      本文链接:https://www.haomeiwen.com/subject/ctelnrtx.html