CSS 网格

最新推荐文章于 2024-08-19 15:08:23 发布

书中自有everything

最新推荐文章于 2024-08-19 15:08:23 发布

阅读量179

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/chen_0804/article/details/106401330

版权

本文详细介绍了CSS Grid布局，包括display:grid属性，如grid-template-columns和grid-template-rows定义网格结构，grid-gap简化间距设置，grid-column和grid-row控制单元格位置，justify-self和align-self调整元素在单元格内的对齐，以及justify-items和align-items实现整体对齐，最后讲解了grid-area创建网格区域和repeat函数的使用。

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

一、display:grid

1、grid-template-columns

grid-template-columns属性值的个数表示网格的列数，而每个值表示对应列的宽度。

<style>
  .d1{
   background:LightSkyBlue;}
  .d2{
   background:LightSalmon;}
  .d3{
   background:PaleTurquoise;}
  .d4{
   background:LightPink;}
  .d5{
   background:PaleGreen;}
  
  .container {
   
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* 请在本行以下添加你的代码 */
    grid-template-columns:100px 100px 100px;
    /* 请在本行以上添加你的代码 */
  }
</style>
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

2、grid-template-rows

添加多行。

<style>
  .d1{
   background:LightSkyBlue;}
  .d2{
   background:LightSalmon;}
  .d3{
   background:PaleTurquoise;}
  .d4{
   background:LightPink;}
  .d5{
   background:PaleGreen;}
  .container {
   
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    /* 请在本行以下添加你的代码 */
    grid-template-rows:50px 50px;
    /* 请在本行以上添加你的代码 */
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

3、grid-column-gap

创建多列之间的间距。

<style>
  .d1{
   background:LightSkyBlue;}
  .d2{
   background:LightSalmon;}
  .d3{
   background:PaleTurquoise;}
  .d4{
   background:LightPink;}
  .d5{
   background:PaleGreen;}
  
  .container {
   
    font-size: 40px;
    min-height: 300px