Antal og bredde af kolonner i CSS-grid

Vi vil introducere arbejdet med grid ved at tildele antallet og bredden af de kolonner, som de underordnede elementer vil blive placeret efter. Til dette formål vil vi bruge egenskaben grid-template-columns, som angives i forældreelementet og definerer antallet og bredden af de kolonner, som de underordnede elementer vil optage i griddet. I egenskabens værdi angiver vi kolonnebredderne i pixels.

Eksempel

Lad os først oprette et forældreelement og gøre det til en grid-container. Antag, at vi har en div, som indeholder fire underordnede elementer. Lad os angive værdien grid for egenskaben display, og i egenskaben grid-template-columns skrive bredden for to kolonner:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 200px 400px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Eksempel

Lad os nu oprette en tabel med fire kolonner af forskellig størrelse:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 250px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Praktiske opgaver