控制嵌套网格列的宽度，嵌套网格是外部网格中的一个项目

【问题标题】：Controlling width of column of nested grid which is an item in outer grid控制嵌套网格列的宽度，嵌套网格是外部网格中的一个项目
【发布时间】：2021-01-09 19:25:20
【问题描述】：

我想创建一个包含此类元素的网格：

我的网格目标是什么：

  • 最少一列，没有最多列数（用户屏幕可以容纳的数量）。
  • 能够设置列和行间距。例如。 1 点。

我的物品目标是什么：

  • 能够设置最小和最大宽度，例如300px - 1fr.
  • 能够设置填充，例如1 点。
  • 项目应由两列组成。
  • 能够在两列之间设置间隙，例如1 点。
  • 左列具有固定宽度，例如50 像素。
  • 右栏应占据剩余的可用宽度。

左列将包含一个固定大小的图像。不会溢出。

我的右栏目标是什么：

  • 它应该由两行组成。
  • 能够设置两行之间的间隙，例如1 点。
  • 底行最多应包含一行文本。如果文本溢出，右侧应该有省略号。
  • 上一行最多应该有四行文本。如果文本溢出，最后应该有省略号。

我能够实现的目标：

  • 创建项目的主网格。
  • 如果项目右栏中的文本没有溢出，则一切都像魅力一样。

问题是当一个项目的右栏中有很多文本时。我无法使正确的列不退出该项目。这是我的主要问题。您能帮我解决这个问题吗？

我当前的代码： https://jsfiddle.net/u9v041zq

我当前的 CSS：

body {
    font-family: 'Poppins', sans-serif;
    color: white;
    background-color: #121212;
    margin: 0;

    line-height: 20px;
}

#grid-container {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    background-color: #222222;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 1em;
    row-gap: 1em;
}

.grid-item {
    background-color: blue;
    padding: 1em;

    display: grid;
    grid-template-columns: 50px auto;
    column-gap: 1em;
}

.grid-item-left {
    width: 50px;
    height: 100%;
    background-color: brown;
}

.grid-item-right {
    height: 100%;
    background-color: darkcyan;
}

.grid-item-right-top {
    background-color: darkgray;

    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-item-right-bottom {
    background-color: darkgreen;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 20px;
    line-height: 20px;
}

示例 HTML：

<html>
<head>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div id="grid-container">
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
            <div class="grid-item">
                <div class="grid-item-left">
                    left
                </div>

                <div class="grid-item-right">
                    <div class="grid-item-right-top">
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                        right top right top right top right top right top right
                    </div>
                    <div class="grid-item-right-bottom">
                        right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
                    </div>
                </div>
            </div>
        
    </div>
</body>
</html>

【问题讨论】：

    标签： html css css-grid


    【解决方案1】：

    与 flex 类似，您需要将 min-width:x 或 overflow:hidden 设置为父级，因此它会强制回流和计算：https://jsfiddle.net/r18snq9c/

    .grid-item-right {
    height: 100%;
    background-color: darkcyan;      
 /* fixed behavior here */    min-width:0;
}

    关于第四行的夹紧，你可以这样做：（见：https://css-tricks.com/almanac/properties/l/line-clamp/）

    .grid-item-right-top {
  /* update */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  /* end update*/
  background-color: darkgray;
  overflow: hidden;
  text-overflow: ellipsis;
}

    演示

    body {
  font-family: 'Poppins', sans-serif;
  color: white;
  background-color: #121212;
  margin: 0;
  line-height: 20px;
}

#grid-container {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  background-color: #222222;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 1em;
  row-gap: 1em;
}

.grid-item {
  background-color: blue;
  padding: 1em;
  display: grid;
  grid-template-columns: 50px auto;
  column-gap: 1em;
}

.grid-item-left {
  width: 50px;
  height: 100%;
  background-color: brown;
}

.grid-item-right {
  height: 100%;
  background-color: darkcyan;
  /* fixed behavior here */
  min-width: 0;
}

.grid-item-right-top {
  /* update */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  /* end update*/
  background-color: darkgray;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-item-right-bottom {
  background-color: darkgreen;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 20px;
  line-height: 20px;
}
    <html>

<head>
  <link rel="stylesheet" href="/static/style.css">
</head>

<body>
  <div id="grid-container">

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="grid-item-left">
        left
      </div>

      <div class="grid-item-right">
        <div class="grid-item-right-top">
          right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top right top right top right right top right top right top
          right top right top right right top right top right top right top right top right right top right top right top right top right top right
        </div>
        <div class="grid-item-right-bottom">
          right bottommmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        </div>
      </div>
    </div>

  </div>
</body>

</html>

    【讨论】：

    猜你喜欢
    • 2011-11-18
    • 1970-01-01
    • 2022-01-19
    • 1970-01-01
    • 2013-03-24
    • 2017-11-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode