必应站长平台,哪些网站教做生物实验,网站开发介绍ppt,看过的网站做记号文章目录 CSS网格布局#xff08;Grid Layout#xff09;1. 简单布局2. 网格合并3. 网格嵌套4. 总结 CSS网格布局#xff08;Grid Layout#xff09;
CSS网格布局#xff08;Grid Layout#xff09;是一种强大且灵活的CSS布局系统#xff0c;允许开发者以网格形式组织和… 文章目录 CSS网格布局Grid Layout1. 简单布局2. 网格合并3. 网格嵌套4. 总结 CSS网格布局Grid Layout
CSS网格布局Grid Layout是一种强大且灵活的CSS布局系统允许开发者以网格形式组织和定位HTML元素。网格布局可以帮助我们在一个容器中定义行rows和列columns然后将元素放置在这些网格中。这种布局方式比传统的基于浮动和定位的布局更直观和易于管理特别适用于响应式设计和复杂的布局需求。
1. 简单布局
我们首先来看一个简单的网格布局示例。假设我们有一个容器我们将其分为3列每列的宽度平分剩余空间然后在容器中放置一些网格项。 HTML代码
!DOCTYPE html
html
headtitleCSS Grid Layout - 简单布局/titlestyle.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;}.grid-item {font-size: 2em;text-align: center;border: 1px solid #e5e4e9;padding: 20px;}/style
/head
bodydiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/divdiv classgrid-item7/divdiv classgrid-item8/divdiv classgrid-item9/div/div
/body
/html在这个简单的示例中我们创建了一个包含9个网格项的网格布局。我们使用display: grid;来创建网格容器通过grid-template-columns设置为repeat(3, 1fr)来定义3列每列宽度平分剩余空间。通过设置grid-gap: 10px;我们为网格项之间添加了10px的间隔。
2. 网格合并
在网格布局中我们可以通过设置grid-row和grid-column的起始和结束行/列索引将多个网格项合并成一个大的网格单元。 在这个例子中我们不难看出上面的网格是3*4的。注意看这里的item-1、item-2。
HTML代码
!DOCTYPE html
html
headtitleCSS Grid Layout - 网格项合并/titlestyle.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;}.grid-item {font-size: 2em;text-align: center;border: 1px solid #e5e4e9;padding: 20px;}.item-1 {background-color: #ef342a;grid-row: 1 / 3; /* 合并占据 1到2 行不包括3 */grid-column: 1 / 2; /* 合并占据 1到1 列不包括2 */}.item-2 {background-color: #f68f26;grid-row: 1 / 2; /* 占据 1 行 */grid-column: 2 / 4; /* 合并占据 2到3 列 */}.item-3 {background-color: #4ba946;grid-row: 1 / 2; /* 占据 1 行 */grid-column: 4 / 4; /* 占据 4 列 */}.item-4 {background-color: #0376c2;grid-row: 2 / 4; /* 合并占据 2到3 行 */grid-column: 2 / 3; /* 占据 2 列*/}.item-5 {background-color: #c077af;grid-row: 2 / 4; /* 合并占据2到3行 */grid-column: 3 / 4; /* 合并占据3列 */}.item-6 {background-color: #f8d29d;grid-row: 2 / 2; /* 占据2行 */grid-column: 4 / 4; /* 占据4列 */}.item-7 {background-color: #b5a87f;grid-row: 3 / 4; /* 占据3行 */grid-column: 1 / 3; /* 合并占据1到2列 */}.item-8 {background-color: #d0e4a9;grid-row: 3 / 4; /* 占据3行 */grid-column: 3 / 4; /* 占据3列 */}.item-9 {background-color: #4dc7ec;grid-row: 3 / 4; /* 占据3行 */grid-column: 4 / 4; /* 占据4列 */}/style
/head
bodydiv classgrid-containerdiv classgrid-item item-11/divdiv classgrid-item item-22/divdiv classgrid-item item-33/divdiv classgrid-item item-44/divdiv classgrid-item item-55/divdiv classgrid-item item-66/divdiv classgrid-item item-77/divdiv classgrid-item item-88/divdiv classgrid-item item-99/div/div
/body
/html在这个示例中我们为每个网格项添加了相应的类名item-1到item-9这些类名与CSS选择器中的类名相对应使得网格合并生效。通过设置
grid-row和grid-column属性我们将中间的9个网格项合并成了一个大的网格单元。
3. 网格嵌套
在网格布局中我们可以创建更复杂的布局比如嵌套网格和不规则网格。以下是一个复杂的网格布局示例其中包含嵌套的网格。 HTML代码
!DOCTYPE html
html
headtitleCSS Grid Layout - 复杂布局/titlestyle.grid-container {display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 10px;}.grid-item {font-size: 2em;text-align: center;border: 1px solid #e5e4e9;padding: 20px;}.nested-grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 5px;}/style
/head
bodydiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/divdiv classgrid-item nested-griddiv classgrid-item7/divdiv classgrid-item8/divdiv classgrid-item9/div/div/div
/body
/html在这个复杂的示例中我们首先创建了一个包含6个网格项的网格布局。然后在第6个网格项中创建了一个嵌套的网格布局该嵌套网格包含3个网格项。
这个示例演示了如何在网格布局中实现嵌套通过在一个网格项中创建另一个网格容器我们可以更灵活地组织和排列内容。
4. 总结
CSS网格布局是一种强大的CSS布局系统它简化了页面的布局和定位同时适应不同屏幕大小的需求。通过使用display: grid;、grid-template-columns、grid-template-rows、grid-row和grid-column等属性我们可以轻松地实现简单到复杂的网格布局。网格合并和嵌套使得在网格中创建复杂的布局变得更加简单和灵活。
