73、美团算法题---用CSS实现一个3×3九宫格

本文链接：https://blog.csdn.net/sunnnnh/article/details/120586493

本文介绍了如何利用CSS Grid和Flexbox来创建响应式的九宫格布局。通过使用fr单位和repeat()函数，可以轻松地在Grid布局中划分列宽，实现各列按比例响应式调整。同时，利用CSS3的calc()函数，可以在Flexbox布局中将容器宽度等分，以适应不同屏幕尺寸。这两个方法都展示了现代CSS在创建动态、适应性布局方面的强大能力。

摘要由CSDN通过智能技术生成

一、使用grid布局

参考Grid布局简介 - 云+社区 - 腾讯云

（1）fr单位：CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。

如果我们将grid-template-columns的值更改为1fr 2fr 1fr。总宽现在是四个 fraction 单位，第二列的宽度将会是其它两列的两倍，其它列各占一个 fraction，此时这些子元素都会随着外层盒子container宽度的变化而变化。

（2）repeat(参数1，参数2)函数：参数1指定行或列的数量，参数2指定它们的宽度。

grid-template-columns: repeat(3,1fr)

//等价于

grid-template-columns: 1fr 1fr 1fr;

<style>
      .container{
        display: grid;
        grid-template-columns: repeat(3,1fr); /*划分为3个1fr的列*/
        grid-template-rows: repeat(3,1fr);  /*划分为3个1fr的行*/
        width: 600px; /*需要设置外层盒子的宽高*/
        height: 400px;
      }
      .container div{
        border: 1px solid black;
      }
</style>

<body>
    <div class="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
</body>

二、使用flex布局实现响应式九宫格

css3的calc()

calc()可以计算不同单位的值，也可以嵌套，不过符号之间一定要有空格，虽然"*"、"/"之间可以没有，建议还是加上空格。例如：width:calc(100% - 30px)；

<style>
    .container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      width: calc(100% / 3); /*将宽度等分为3份*/
      height: 50px;
      box-sizing: border-box;
      border: 1px solid #000;
    }
</style>

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>