时间戳

首页 > 解决方案 > 网页设计问题：表格列的宽度相同

html - 网页设计问题：表格列的宽度相同

问题描述

我表中的容器都具有相同的宽度，它们采用图像最宽的容器的宽度。我希望它们都根据图像大小具有自己独特的宽度。有什么解决方案吗？我在每个容器内使用一个网格来获得不同的方块。

第 1 行第 4 列上的容器很好，但第 2 行上的容器不是。

网站目前

网格CSS：

.container {
    border: 1px gray solid;
    display: grid;

    grid-template-columns: auto 2rem;

    grid-template-rows: 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857%;
    /*grid-template-rows: auto;*/

    grid-template-areas:
            "main symbol1"
            "main symbol2"
            "main symbol3"
            "main symbol4"
            "main symbol5"
            "main symbol6"
            "footer1 symbol7";
    margin: 20px 5px 10px 5px;
    height: 12rem;
    /*width: auto;*/
}

完整代码： https ://codepen.io/robbeg-immalle/pen/wvGBvXr

标签： htmlcss

解决方案

推荐阅读