无法理解使用 CSS Grid 的布局理念答案

【问题标题】：Can't understand layout idea using CSS Grid无法理解使用 CSS Grid 的布局理念
【发布时间】：2021-10-10 17:51:43
【问题描述】：

我正在尝试布局一个我正在使用 CSS 网格构建的简单 Web 应用程序。

我需要帮助了解 CSS 网格的问题所在。由于某种原因，浏览器正在删除我正在定义的 CSS 网格规则。

另请参阅我的 HTML 和 CSS 代码

    /* Main Container */
.ipad {
    width: 1024px;
    height: 1024px;
    background-color: antiquewhite;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 3fr;
}

/* 
Grid Layout */
.firstbox {
    background-color: blue;
    height: 80px;
    border-radius: 20px;
    margin: 10px 10px 10px 10px;
    grid-column-start: 1fr;
    grid-column-end: 2fr;
    grid-row-start: 1fr;
    grid-row-end: 3fr;

}

.topright {
    background-color: blueviolet;
    border-radius: 20px;
    margin: 10px 10px 10px 10px;
    height: 80px;
    grid-column-start: 2fr;
    grid-column-end: 3fr;
}

.bottomright {
    background-color: cadetblue;
    border-radius: 20px;
    margin: 10px 10px 10px 10px;
    height: 80px;
    grid-column-start: 2fr;
    grid-column-end: 3fr;
    grid-row-start: 2fr;
}

【问题讨论】：

嗨，也许你可以检查 TailwindCSS，因为它有一些视觉效果
-start 和 -end 是用于在网格中指定位置的无单位值，而不是用于确定 fr 单位的大小
黄色感叹号告诉您属性被划掉的原因。像 MDN CSS Grid Layout 这样的网站可以让您深入了解哪些值是有效的。

标签： html css css-grid

【解决方案1】：

您的单位无效。像 grid-column-start 这样的规则接受一个数字（例如 1），然后你用像 1fr 这样的单位给它赋值。

它不是从“可用空间的 1 分之一”列开始，而是从第 1 列开始。

grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;

【讨论】：