基础篇13—CSS中display:gird网格布局详解

最新推荐文章于 2024-03-21 19:35:14 发布

言程序plus

最新推荐文章于 2024-03-21 19:35:14 发布

阅读量403

点赞数

分类专栏： CSS从入门到精通文章标签： html css 前端

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/m0_61243965/article/details/129287097

版权

CSS从入门到精通专栏收录该内容

31 篇文章 2 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文深入解析CSS中的grid布局，包括如何创建网格容器，详细介绍了grid-template-columns和grid-template-rows属性来定义列宽和行高，以及justify-content和align-content属性在网格元素对齐中的应用，通过多个实例展示了各种对齐方式的效果。

摘要由CSDN通过智能技术生成

CSS 网格容器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>网格容器</h1>

<p>网格容器内放置着由列和行内组成的网格元素。</p>

<div class="grid-container">
  <div>1</div>
  <div>2

了解本专栏