HTML+CSS - 网页布局之网格布局

蒜蓉大猩猩

已于 2024-09-14 11:20:43 修改

阅读量361

点赞数 7

分类专栏：网站开发：XTML+CSS 文章标签： html css 前端前端框架 xhtml xss

于 2024-09-14 09:57:05 首次发布

本文链接：https://blog.csdn.net/qq_51222843/article/details/142237392

版权

网站开发：XTML+CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. dispaly设置

display是 CSS 中用于设置元素的显示方式的属性。它决定了元素如何被渲染到页面上。不同的display值会改变元素的显示行为，包括布局、排版以及对其他元素的影响。

其中网格容器是最常用的几种方式之一，在文档中创建类似于网格的效果，将组件十分方便的进行填充布局。

2. 创建网格容器

1. 设置元素显示方式为grid

.container{
    display:grid;
}

创建一个网格图，初始为一例一行。

2. 设置网格列的个数与宽度

grid-template-columns:repeat(3,1fr);

px代表实数排布，设置多少，间隔多少。

fr代表比例表示，在可编辑位置进行比例排布。

3. 设置网格行的个数与高度

grid-template-rows:repeat(2,100px);

设置多少行，每一行的高度。

3. 网格细节修改

2.1 设置间隔大小

grid-gap:10px; /*行列间隔大小一致*/
grid-column-gap:10px; /*网格列的大小，即间隔宽度*/
grid-row-gap:10px; /*网格行大小，即间隔高度*/

设置每一个块状体彼此之间的距离

2.2 显式网格与隐式网格

显式网格是我们用 grid-template-columns 或 grid-template-rows 属性创建的。而隐式网格则是当有内容被放到网格外时才会生成的。

隐式网格会自动生成，根据我们所设置的相关参数持续排布。若没有指定行的大小，则默认为auto

2.3 自动填充多列

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}

设置列：每一列最小200px宽度，最大1fr的比例，根据大小自动生成有多少列数

设置行：最小100px的高度，最大不设限

3. 网格元素放置

3.1 直接放置

	.container {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr); /* 三列，每列占据相等的空间 */
	  grid-template-rows: repeat(2, 100px);  /* 两行，每行100px高 */
	  gap: 10px; /* 网格单元之间的间隙 */
	}

一般而言，会自动将网格布局所含概的子类类别自动按照代码顺序填充进去

3.2 自定义位置放置

• grid-column & grid-row

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

.item1 { grid-column: 1 / 2; grid-row: 1 / 2; }
.item2 { grid-column: 2 / 3; grid-row: 1 / 2; }
.item3 { grid-column: 3 / 4; grid-row: 1 / 2; }
.item4 { grid-column: 1 / 2; grid-row: 2 / 3; }
.item5 { grid-column: 2 / 3; grid-row: 2 / 3; }
.item6 { grid-column: 3 / 4; grid-row: 2 / 3; }

grid-column 是 CSS Grid 布局中的一个属性，用于指定一个网格项目在网格中的列位置。它可以定义项目开始和结束的列线，控制项目跨越的列数。

grid-column: <start-line> / <end-line>;

• 设置起始

.item1 {
  grid-column: 1 / 3; /* 从第1列线开始，跨越到第3列线 */
}

第一个块状体的末尾线默认为第二个块状体的起始线。

• 设置跨越

.item2 {
  grid-column: 2 / span 2; /* 从第2列线开始，跨越2列 */
}

span所定义跨越2列

3.3 设置起始位置

grid-column-start 是 CSS Grid 布局中的一个属性，用于指定网格项目开始在哪一列的网格线。它可以单独使用，也可以和 grid-column-end 配合使用来定义项目跨越的列范围。

.item {
  grid-column-start:1; /*项目从第一列开始*/
  grid-column-start: span 2; /* 项目跨越2列，从当前位置往后 */
}

搭配grid-column-end:

.item {
  grid-column-start: 1; /* 从第1列线开始 */
  grid-column-end: 4;   /* 到第4列线结束 */
}

4. 网格布局实例

使用HTML编写网页内容

	<body>
<div class="container">
  <header>This is my lovely blog</header>
  <article>
    <h1>My article</h1>
    <p>
      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
    </p>

    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </article>
  <aside>
    <h2>Other things</h2>
    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est.
    </p>
  </aside>
  <footer>Contact Taoabo@qq.com</footer>
</div>

	</body>

原有HTML文档：

使用css进行修饰

	<style>
	.container
	{
		display:grid;
		grid-template-columns: 1fr 3fr;
		grid-gap:20px;
	}
	header{
		grid-column:1/3;
		grid-row: 1;
	}
	article{
		grid-column:2;
		grid-row:2;
	}
	aside{
		grid-column:1;
		grid-row:2;
	}
	footer{
		grid-column:1/3;
		grid-row:3;
	}
	footer {
	  border-radius: 5px;
	  padding: 10px;
	  background-color: rgb(207, 232, 220);
	  border: 2px solid rgb(79, 185, 227);
	}
	header{
		font-size: 50px;
		border-radius: 5px;
		background-color: #90EE90;
		padding:10px;
	}
	</style>

效果展示：