css中的grid高频布局

1.需求

1.一个父级容器内有n个子元素;
2.每个子元素最小宽度是100px；
3.每个子元素最大宽度根据屏幕宽度自适应；
4.每个子元素的宽度保持同宽；
5.每个元素之间有间隔，每一行的两边不留间隙，每一列的上下不留间隙；
6.每个子元素中的文本超出之后省略显示；

2.实现下图效果：

css排版常见布局

3.完整代码

DOCTYPE html>
html>

head>
  title>Documenttitle>
  style>
    .grid-box-9 {
      width: 100%;
      display: grid;
      gap: 2px;
      grid-template-columns: repeat(3, minmax(100px, 1fr));
      grid-auto-rows: 50px;
      grid-auto-flow: row dense;
      background-color: aquamarine;
    }

    .grid-box-9>div {
      flex: 1;
      background-color: bisque;
      border-radius: 4px;
      border: 1px solid #ccc;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      word-break: break-all;
    }
  style>
head>

body>
  div class="grid-box-9">
    div>1div>
    div>2div>
    div>3div>
    div>长文本长文本长文本长文本长文本长文本长文本长文本div>
    div>5div>
    div>5div>
    div>5div>
  div>
body>

html>

4.简单说明

使用grid布局即可轻松完成上述需求；
详细属性、参数设置，可移步：grid布局详解

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: python_基础知识_0_安装(window/linux)

    0 参考链接: http://www.myexception.cn/linux-unix/1247067.html  写的很不错   1 window下安装Python   a) 下载地址: https://www.python.org/downloa…