CSS Grid Container

1
2
3
4
5
6
7
8

Try It Yourself

grid container

Upang gamitin ang HTML na elemento bilang konteyner ng grid, dapat ninyong itatalaga ang display Ang attribute na ito ay itatalaga sa grid o inline-grid.

Ang konteyner ng grid ay binubuo ng mga proyekto na nakalagay sa loob ng mga column at mga hilera.

grid-template-columns 属性

grid-template-columns Ang attribute na ito ay nagtatalaga ng bilang ng column sa grid layout at maaari ring itatalaga ang lapad ng bawat column.

Ang halaga nito ay isang bilang na hinahati ng spat, kung saan bawat halaga ay nagtatalaga ng haba ng bawat column.

Kung gusto ninyong ang grid layout na may 4 na column, itatalaga ninyo ang lapad ng 4 na column; kung lahat ng column ay dapat magkaroon ng parehong lapad, itatalaga ninyo sa "auto".

Example

Lumikha ng grid na may 4 na column:

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

Try It Yourself

Note:Kung mayroong 4 na o higit pang proyekto sa 4 na column grid, ay awtomatikong magdagdag ang grid ng bagong hilera at ilagay ang mga proyekto doon.

grid-template-columns Ang attribute na ito ay maaari ring gamitin upang talagang itatalaga ang sukat ng column (lapad).

Example

Itatalaga ang sukat ng 4 na column:

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

Try It Yourself

grid-template-rows 属性

grid-template-rows Ang attribute na ito ay nagtatalaga ng taas ng bawat panig.

1
2
3
4
5
6
7
8

Ang halaga nito ay isang bilang na hinahati ng spat, kung saan bawat halaga ay nagtatalaga ng taas ng bawat hilera:

Example

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

Try It Yourself

align-content 属性

justify-content Ang attribute na ito ay ginagamit upang alinlangan ang buong grid sa loob ng konteyner.

1
2
3
4
5
6
7
8

Note:Ang kabuuang lapad ng grid ay dapat na mas maliit kaysa sa lapad ng konteyner, upang mabubuhay ang attribute na justify-content.

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

align-content 属性

align-content The property is used to vertically align the entire grid within the container.

1
2
3
4
5
6
7
8

Note:The total height of the grid must be less than the height of the container so that the align-content property can take effect.

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself