Html 使用css网格进行突破

按照所描述的技术，我尝试制作一个css网格，其中我的图像将比居中的文本列更宽。然而，我不能让它工作，我不确定为什么

我的HTML：

同侧眼睑[…]


同侧眼睑[…]

和css：

img{
宽度：100%；
}
.电网{
显示：网格；
栅隙：20px；
网格自动行：150px；
网格模板列：
[完全启动]最小最大值（1米，1英尺）
[主起点]最小值（0，40em）[主终点]
最小最大值（1米，1英尺）[全端]；
}
.grid>*{
网格柱：主；
}
.满{
网格列：满；
}

这会在我的机器（Google Chrome，Windows）上呈现此屏幕截图，其中图像未拉伸到全宽：

我想先让它工作，因为我的目标是有一个三宽度的布局：全宽度、宽和文本（主）宽度：

首先，我希望全宽/文本宽度是可能的，然后我会扩展第三个宽度（在上面的“图像宽度”）

我是简单地输入了一个我找不到的错误，还是这是其他地方的错误？

网格属性会影响网格项，这些网格项是网格容器的直接子元素（类似于flexbox）。在这里，您在

main

网格容器中有一个额外的

div

包装器-删除此：

img{
宽度：100%；
}
.电网{
显示：网格；
栅隙：20px；
网格自动行：150px；
网格模板列：[完全开始]最小值（1em，1fr）[主要开始]最小值（0，40em）[主要结束]最小值（1em，1fr）[完全结束]；
}
.grid>*{
网格柱：主；
}
.满{
网格列：满；
}

同侧眼睑[…]



同侧眼睑[…]

您的.full图像不是网格的直接子对象，只是它的父div是网格项。确保图像位于div之外（因此它是main.grid的直接子对象），并且它的行为应该与您期望的一样。

|     |      | text width |      |      |
|     |      | text width |      |      |
|     |                          |      |
|     |  ---   image width  ---  |      |
|     |                          |      |
|     |      | text width |      |      |
|     |      | text width |      |      |
|                                       |
|  ---------   full width    ---------  |
|                                       |
|     |      | text width |      |      |
|     |      | text width |      |      |