使用CSS网格的文章布局：如何将文本环绕图像（或浮动图像）？

我知道网格项的直接子项不能浮动。我正在尝试创建一个类似这样的文章布局：将图像拉到任意一侧，并使文本围绕它流动

。使用命名模板列，我可以让图像只填充网格宽度的一部分，但是有没有办法让周围的文本围绕它流动

希望我的代码笔示例有意义；请让我知道，如果我可以提供额外的信息或澄清

图{
保证金：0；
}
img{
最大宽度：100%；
高度：自动；
}
文章{
最大宽度：800px；
保证金：自动；
显示：网格；
网格模板列：[宽开始]最小值（1em，1fr）[主开始]最小值（0，16em）[主半部分]最小值（0，16em）[主结束]最小值（1em，1fr）[宽结束]；
}
第条>*{
网格柱：主；
}
身材{
网格柱：宽起点/主半部；
}
div{
格构柱：主半/主端；
左：1米；
}

文章
Lorem ipsum dolor sit amet，奉献精英。多洛雷姆·波罗·维罗！在《尼莫》中？我的工作是为我的生命而努力。负号，facere？奎拉特，伊尼姆实验室

我希望文字能绕到我的右边

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。学生，小白盲，鼻腔白斑病，时间性痴呆练习。你的意思是什么

Lorem ipsum dolor sit amet，奉献精英。这是一个非人格化的类似发明者，一个没有人格化的人，一个没有人性的人

文本现在位于我旁边的一列中（因为我将其包装在
div
中，但它不会自动包装在我下面）

这是一个伟大的事业，是一个卓越的事业，是一个伟大的事业，是一个伟大的事业，是一个伟大的事业，是一个伟大的事业，是一个伟大的事业

知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识

Lorem ipsum dolor sit amet，是一位杰出的领导者。在vitae ex fugit sequi，natus asperiores？Laudantium optio，doloribus error dolores Liquid esse，Reiciensis mollitia alias vel illo，amet officiis

如果我理解正确，你不必在整个版面中只使用CSS网格，你可以将你的图形和段落包装在另一个div中，然后通过该div将图形的最大宽度设置为50%，float:left，以及一些右侧边距…你明白了

图{margin:0；}
img{最大宽度：100%；高度：自动；}
文章{
最大宽度：800px；
保证金：自动；
显示：网格；
网格模板列：
[宽启动]最小最大值（1米，1英尺）
[主启动]最小最大值（0，16em）
[主半部]最小最大值（0，16em）[主端]
最小最大值（1米，1英尺）[宽端]；
}
第条>*{
网格柱：主；
}
.漂浮{
边缘底部：20px；
边框底部：1px实心#ddd；
}
.浮动数字{
浮动：左；
最大宽度：50%；
右边距：20px；
}
.浮动p{
边际上限：0；
}

文章
我的知识是一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德，一种美德

我希望文字能绕到我的右边

我的意思是，我是一位杰出的医生，我是一位医生，我是一名医生，我是一名医生，我是一名医生，我是一名医生，我是一名医生，我是一名医生，我是一名医生

知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种理性的美德

文本现在位于我旁边的一列中（因为我将其包装在
div
中，但它不会自动包装在我下面）

这是一个伟大的事业，是一个卓越的事业，是一个伟大的事业，是一个伟大的事业，是一个伟大的事业，是一个伟大的事业，是一个伟大的事业

知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识，知识

Lorem ipsum dolor sit amet，是一位杰出的领导者。在vitae ex fugit sequi，natus asperiores？Laudantium optio，doloribus error dolores Liquid esse，Reiciensis mollitia alias vel illo，amet officiis

CSS网格不能这样做，因为它不是网格。正如您所说，如果嵌套元素，则需要浮动