Idadi na Upana wa Safu Wima kwenye Gridi za CSS

Utangulizi wa kufanya kazi kwenye gridi tutaanza kwa kuaisha idadi na upana wa safu wima, ambazo elementsi watoto zitawekwa. Kwa lengo hili tutatumia sifa grid-template-columns, ambayo huelekezwa kwenye kipengele-kizazi mkuu na huweka idadi na upana wa safu wima, ambazo elementsi watoto watachukua kwenye gridi. Katika thamani ya sifa tunaainisha upana wa safu wima kwenye pikseli.

Mfano

Wacha kwanza tuunde kipengele kizazi mkuu na tukifanye kiwe chombo cha gridi. Tuchukulie tuna div, ambamo kuna elementsi nne watoto. Tuaidishe kwake katika sifa display thamani grid, na katika sifa grid-template-columns tuandike upana wa safu wima mbili:

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

Результат:

Mfano

Sasa tujaunde jedwali lenye safu wima nne tofauti kwa ukubwa :

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

Результат:

Kazi za Vitendo