标签：square width 100% 九宫格 80% 适应 如何 grid inner

第一种方法： flex布局

布局：
<div class="square">
    <div class="square-inner">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>
样式：
.square{
    position: relative;
    width: 80%;
    padding-bottom: 80%;  /* padding百分比是相对父元素宽度计算的 */
}
.square-inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了  */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.square-inner>div{
    width: calc(100% / 3);
    height: calc(100% / 3);
    border: 5px solid #fff;
    background: red;
    box-sizing: border-box;
}

第二种： grid布局

布局：
<div class="square">
    <div class="square-inner">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>
样式：
.square{
    position: relative;
    width: 80%;
    padding-bottom: 80%;
}
.square-inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 2%;
    grid-auto-flow:column;
}
.square-inner>div {
    background: red;
}

标签：square,width,100%,九宫格,80%,适应,如何,grid,inner
来源： https://blog.csdn.net/weixin_51439771/article/details/120115499

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。