Middle

CSS менен канча иштедиңиз? Grid Layout менен таанышыңызбы?

sobes.tech AI

AIден жооп

Мен CSS менен көп иштедим, анын ичинде татаал жана адаптивдүү макеттерди түзүү үчүн Grid Layout колдонуу. CSS Grid — эки өлчөмдүү тор түзүү үчүн күчтүү инструмент, ал элементтердин жайгашуусун саптар жана багыттар боюнча оңой башкарууга мүмкүндүк берет.

Жөнөкөй Grid Layoutтун мисалы:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

HTMLде:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Бул 3 багыт жана 2 саптан турган тор түзөт, элементтердин бирдей бөлүштүрүлүшү менен. Grid Layout — татаал жана ийкемдүү интерфейстер түзүү үчүн пайдалуу, float же flexbox колдонбостон.

Мурунку Кийинки