1.grid grid-template-columns

display:gridz|会将整个父容器切分成网格
grid-template-columns 设置grid布局网格列的width
1fr

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9.     *{margin: 0;padding: 0;}
  10.     /*display:gridz|会将整个父容器切分成网格*/
  11.     /*grid-template-columns 设置grid布局网格列的width
  12.     1fr
  13.     */
  14. .parent{
  15.     width: 400px;
  16.     height: 400px;
  17.     background-color: red;
  18.     display: grid;
  19.     grid-template-columns: 1fr 1fr 1fr;
  20. }
  21. .item{
  22.     width: 100px;
  23.     height: 100px;
  24.     border: 1px solid #333;
  25. }
  26. </style>
  27. <body>
  28. <div class="parent">
  29.     <div class="item"></div>
  30.     <div class="item"></div>
  31.     <div class="item"></div>
  32. </div>
  33. </body>
  34. </html>

grid-template-column列宽.PNG

2.grid-temlpate-rows

设置网格行的高度
传一个参数 设置第一行的高度
传两个参数 第一个参数第一行 第二参数是第二行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    /*display:gridz|会将整个父容器切分成网格*/
    /*grid-template-columns 设置grid布局网格列的width
    1fr
    */
    /* grid-temlpate-rows 设置网格行的高度
    传一个参数 设置第一行的高度
    传两个参数 第一个参数第一行 第二参数是第二行
    */
.parent{
    width: 400px;
    height: 400px;
    background-color: red;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 200px;
}
.item{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
}
</style>
<body>
<div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

1.PNG

3.repeat

repeat(num,value) 第一个参数传的是行/列数，第二个参数传递值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
.parent{
    width: 400px;
    height: 400px;
    background-color: red;
    display: grid;
    /*repeat(num,value) 第一个参数传的是行/列数，第二个参数传递值*/
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,100px);
}
.item{
    border: 1px solid #333;
}
</style>
<body>
<div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

1.PNG

4.grid-column-gap grid-row-gap

grid行或列的间隙
简写：
/grid-gap:row column/
grid-gap:10px 20px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
.parent{
    width: 400px;
    height: 400px;
    background-color: red;
    display: grid;
    /*repeat(num,value) 第一个参数传的是行/列数，第二个参数传递值*/
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,100px);
    grid-column-gap:10px;
    grid-row-gap:10px;
}
.item{
    border: 1px solid #333;
}
</style>
<body>
<div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

1.PNG

5.auto=1fr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
.parent{
    width: 400px;
    height: 400px;
    background-color: red;
    display: grid;
    /*repeat(num,value) 第一个参数传的是行/列数，第二个参数传递值*/
    /*auto=1fr*/
    grid-template-columns: 100px auto 100px;
    grid-template-rows: repeat(2,100px);
    /*grid-gap:row column*/
    grid-gap:10px 20px;
}
.item{
    border: 1px solid #333;
}
</style>
<body>
<div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

1.PNG

6.grid水平居中

让网格水平居中
设置在网格在容器中水平方向justify-content
设置在网格在容器垂直平方向align-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
.parent{
    width: 400px;
    height: 400px;
    background-color: red;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(2,100px);
    grid-gap:10px 20px;
    justify-content: center;
    align-content: center;
    /*
    让网格水平居中
    设置在网格在容器中水平方向justify-content
    设置在网格在容器垂直平方向align-content
    */
}
.item{
    border: 1px solid #333;
}
</style>
<body>
<div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

1.PNG

7.单独设置元素在单元格中的位置

水平justify-self:
垂直align-self

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
.parent{
    width: 500px;
    height: 400px;
    background-color: red;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px;
    /*设置元素在单元格水平方向的对齐*/
    justify-items: center;
    align-items: center;
}
.item{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
}
/*单独设置元素在单元格中的位置
  水平justify-self:
  垂直align-self:
  */
.one{
    justify-self: start;
    align-self: start;
}
</style>
<body>
<div class="parent">
    <div class="item one"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

1.PNG

8.justify-items: align-items:

设置元素在单元格水平/垂直方向的对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
.parent{
    width: 500px;
    height: 400px;
    background-color: red;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px;
    /*设置元素在单元格水平方向的对齐*/
    justify-items: center;
    align-items: center;
}
.item{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
}
</style>
<body>
<div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

1.PNG