Maana ya auto kwenye Gridi za CSS

Kwenye gridi, wakati wa kubainisha vipimo vya safu na nguzo, unaweza kutumia thamani auto. Katika kesi hiyo, vitalu vitajaza tu nafasi yote inayopatikana iliyobaki bila upana ambao umebainishwa kwenye pikseli. Tuangalie kwa mifano.

Wacha tubainishe upana maalum kwa pikseli kwenye nguzo ya kwanza na ya tatu, na wacha nguzo ya pili iichukue nafasi iliyobaki kiotomatiki:

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: 100px auto 150px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Задание 1

Weka vitoto viwili kwa nguzo mbili: nguzo ya kwanza iwe na upana wa 200px, na ya pili wacha iichukue nafasi iliyobaki.

Задание 2

Weka vitoto kwa nguzo tatu: nguzo ya kwanza iwe na upana wa 100px, ya pili 150px, na ya tatu wacha iichukue nafasi iliyobaki.