display:grid
时间: 2023-10-18 21:31:12 浏览: 56
display: grid是一个CSS属性,用于创建一个网格容器。当我们将一个元素的display属性设置为grid时,这个元素就成为了一个网格容器。通过将wrapper置为网格容器并使用grid-template-columns属性,我们可以定义网格的列轨道。例如,通过设置grid-template-columns: 200px 200px 200px,我们可以创建一个具有三个等宽列的网格容器。在网格容器中,我们可以使用grid-column-gap和grid-row-gap属性来定义网格单元之间的横向和纵向间距。此外,我们也可以使用grid-gap属性来同时定义横向和纵向间距的合并形式。通过在网格容器上声明以上属性,我们可以轻松地创建一个灵活且易于布局和调整的网格系统。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [display:grid 网格布局的基础使用](https://blog.csdn.net/DDD4V/article/details/119817341)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]