Antal och bredd på kolumner i CSS-grid

Vi börjar bekanta oss med hur grid fungerar genom att först tilldela antal och bredd på kolumnerna, längs vilka barn-elementen kommer att placeras. För detta ändamål använder vi egenskapen grid-template-columns, som anges i föräldraelementet och definierar antal och bredd på kolumnerna som barn-elementen kommer att uppta i griddet. I egenskapens värde anger vi kolumnbredderna i pixlar.

Exempel

Låt oss först skapa ett föräldraelement och göra det till en grid-container. Anta att vi har en div som innehåller fyra barn-element. Låt oss för den i egenskapen display ange värdet grid, och i egenskapen grid-template-columns skriva in bredden för två kolumner:

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;
}

Результат:

Exempel

Låt oss nu skapa en tabell med fyra kolumner av olika storlek:

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;
}

Результат:

Praktiska uppgifter