Pixel und fr-Einheiten in CSS Grids

Die Breite der Spalten kann gleichzeitig in Pixeln und fr angegeben werden:

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>9</div>
</div>
css#parent {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Задание 1

Angenommen, Ihr Grid hat drei Spalten. Sorgen Sie dafür, dass die erste Spalte 100px einnimmt, und die restlichen beiden Spalten die gleiche Größe haben.

Задание 2

Angenommen, Ihr Grid hat vier Spalten. Sorgen Sie dafür, dass die erste und die letzte Spalte 100px einnehmen, und die restlichen Spalten den verbleibenden Platz so aufteilen, dass die dritte Spalte 1.5 mal so groß wie die zweite ist.