CSS గ్రిడ్ కంటైనర్

1
2
3
4
5
6
7
8

స్వయంగా ప్రయత్నించండి

网格容器

如需使 HTML 元素充当网格容器，您必须把 display 属性设置为 grid 或 inline-grid。

网格容器由放置在列和行内的网格项目组成。

grid-template-columns 属性

grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度。

该值是以空格分隔的列表，其中每个值定义相应列的长度。

如果您希望网格布局包含 4 列，请指定这 4 列的宽度；如果所有列都应当有相同的宽度，则设置为 "auto"。

ఉదాహరణ

生成包含四列的网格：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

స్వయంగా ప్రయత్నించండి

మీరు గమనించండి:如果在 4 列网格中有 4 个以上的项目，则网格会自动添加新行并将这些项目放入其中。

grid-template-columns 属性还可以用于指定列的尺寸（宽度）。

ఉదాహరణ

设置这 4 列的尺寸：

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

స్వయంగా ప్రయత్నించండి

grid-template-rows 属性

grid-template-rows 属性定义每列的高度。

1
2
3
4
5
6
7
8

దాని విలువ అంటే విడివిడి విలువలు అంటే ప్రతి విలువ సంబంధిత పద్ధతి పొడవును నిర్వచిస్తుంది:

ఉదాహరణ

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

స్వయంగా ప్రయత్నించండి

justify-content అంశం

justify-content అంశం కంటైనర్ లోపల మొత్తం గ్రిడ్ ని ఆయామంగా నిర్వహించడానికి ఉపయోగించబడుతుంది.

1
2
3
4
5
6
7
8

మీరు గమనించండి:గ్రిడ్ మొత్తం వెడల్పు కంటైనర్ వెడల్పు కంటే తక్కువగా ఉండాలి, అలా జస్టిఫై-కంటైన్ అంశం ప్రభావం వస్తుంది.

ఉదాహరణ

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  justify-content: space-around;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  justify-content: space-between;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  justify-content: center;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  justify-content: start;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  justify-content: end;
}

స్వయంగా ప్రయత్నించండి

align-content అంశం

align-content 属性用于垂直对齐容器内的整个网格。

1
2
3
4
5
6
7
8

మీరు గమనించండి:గ్రిడ్ మొత్తం ఎత్తు కంటైనర్ ఎత్తు కంటే తక్కువగా ఉండాలి, అలాగే align-content అట్రిబ్యూట్ పనిచేసేందుకు ఉండాలి。

ఉదాహరణ

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

స్వయంగా ప్రయత్నించండి