Grid CSS atau Flexbox: Mana Yang Lebih Baik untuk Mencipta Lajur?

.flex-container { 
  display: flex; 
} 

.flex-container { 
  display: flex; 
  flex-wrap: wrap; 
} 

menggunakan CSS ini:

.grid-container { 
  display: grid; 
} 

Tiada apa-apa yang akan berlaku dengan pengisytiharan di atas sahaja kerana kelakuan lalai Grid mencipta baris yang bertindan di atas satu sama lain.

Untuk bertukar kepada paparan lajur, anda perlu menukar grid-auto-aliran harta (iaitu barisan secara lalai):

.grid-container { 
  display: grid; 
  grid-auto-flow: column; 
} 

Sekarang inilah hasilnya:

Untuk menentukan bilangan lajur yang anda inginkan pada setiap baris, gunakan grid-template-lajur :

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
} 

Nilai ini mencipta lima lajur yang sama lebar. Untuk mendapatkan gelagat pembalut yang serupa dengan Flexbox, anda boleh menggunakan sifat responsif seperti muat secara automatik dan min-maks :

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, min-max(300px, 1fr)); 
} 

Anda akan sering mendengar Flexbox dan Grid masing-masing dirujuk sebagai satu dimensi dan dua dimensi. Itu bukan kebenaran sepenuhnya, bagaimanapun, kerana kedua-dua Flexbox dan Grid boleh membuat a sistem susun atur dua dimensi . Mereka hanya melakukannya dengan cara yang berbeza, dengan kekangan yang berbeza.

Apa yang paling penting ialah cara anda boleh mengawal aspek satu dimensi reka letak. Pertimbangkan imej berikut, sebagai contoh:

Perhatikan sejauh mana konsisten lajur Grid dan tidak sekata setiap lajur dalam Flexbox. Setiap baris/lajur dalam bekas fleksibel adalah bebas daripada yang lain. Jadi sesetengahnya mungkin lebih besar daripada yang lain, bergantung pada saiz kandungannya. Ini kurang seperti lajur dan lebih seperti blok bebas.

Grid berfungsi secara berbeza, dengan menyediakan grid 2D dengan lajur dikunci masuk secara lalai. Lajur dengan teks pendek akan mempunyai saiz yang sama dengan lajur dengan teks yang lebih panjang, seperti yang ditunjukkan oleh imej di atas.

Ringkasnya, Grid CSS sedikit lebih berstruktur, manakala Flexbox lebih berstruktur sistem susun atur yang fleksibel dan responsif . Sistem susun atur alternatif ini dinamakan dengan baik!

Bila hendak menggunakan Flexbox

Adakah anda mahu bergantung pada saiz intrinsik setiap lajur/baris, seperti yang ditakrifkan oleh kandungannya? Atau adakah anda ingin mempunyai kawalan berstruktur dari perspektif ibu bapa? Jika jawapan anda adalah yang pertama, maka Flexbox ialah penyelesaian yang sesuai untuk anda.

Untuk menunjukkan ini, pertimbangkan menu navigasi mendatar. Gantikan markup dalam tag dengan ini:

<h1>Flexbox vs. Grid</h1> 
 
<header class="flex"> 
  <h2>Flexbox</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 
</header> 
 
<header class="grid"> 
  <h2>Grid</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 
</header> 

Gantikan penanda dalam fail CSS dengan ini:

bagaimana mencari buku apabila anda tidak mengetahui tajuk atau pengarangnya

.nav-list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
 
header { 
  --border-width: 5px; 
  border: var(--border-width) solid black; 
  margin-bottom: 30px; 
} 
 
header > *:first-child { 
  border: var(--border-width) solid #FFC0CB; 
  margin: 0; 
} 
 
li { 
  border: var(--border-width) solid #90EE90; 
} 

Inilah hasilnya:

Sekarang, ubah navigasi pertama kepada susun atur fleksibel dan yang kedua kepada susun atur grid dengan menambah CSS berikut:

.flex .nav-list { 
  display: flex; 
  gap: 1em; 
  flex-wrap: wrap; 
} 
 
.grid .nav-list { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
} 

Bandingkan keputusan untuk melihat mana yang lebih sesuai:

Daripada imej di atas, anda dapat melihat bahawa Flexbox adalah penyelesaian yang sempurna dalam kes ini. Anda mempunyai item yang anda mahu pergi bersebelahan antara satu sama lain dan mengekalkan saiz intrinsiknya (besar atau kecil bergantung pada panjang teks). Dengan Grid, setiap sel mempunyai lebar tetap dan ia tidak kelihatan sebagus—sekurang-kurangnya dengan pautan teks biasa.

Bila Menggunakan Grid CSS

Satu tempat yang Grid benar-benar cemerlang ialah apabila anda ingin mencipta sistem tegar daripada induk. Contohnya ialah satu set elemen kad yang harus sama lebarnya, walaupun ia mengandungi jumlah kandungan yang berbeza.

Gantikan penanda di dalam tag dengan ini:

<h1>Flexbox vs. Grids</h1> 
 
<section class="cards"> 
  <h2>Some cards</h2> 
 
  <div class="columns"> 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">A Longer Title Than Others</h3> 
 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere 
         excepturi sit ea dolores totam veniam qui voluptates commodi, 
         perferendis et!</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
  </div> 
</section> 

Tambahkan CSS ini:

.columns { 
  display: flex; 
  gap: 1em; 
} 
 
article { 
  background-color: #90EE90; 
  color: black; 
  padding: 15px; 
} 
 
ul { 
  background-color: white; 
  padding: 2px; 
  list-style: none; 
} 

Anda bermula dengan paparan Flexbox untuk melihat penampilannya, jadi anda boleh membandingkannya dengan paparan grid. Inilah outputnya:

Perhatikan bagaimana lajur terakhir lebih besar daripada yang lain kerana saiz intrinsiknya, itulah yang dikendalikan dengan baik oleh Flexbox. Tetapi untuk menjadikannya lebar yang sama menggunakan Flexbox, anda perlu menentang saiz intrinsik itu dengan menambah yang berikut:

.columns > * { 
  flex: 1; 
} 

Ini berjaya. Tetapi Grid lebih sesuai untuk kes seperti ini. Anda hanya tentukan bilangan lajur dan anda boleh pergi:

.columns { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 1em; 
} 

Inilah hasilnya:

Satu lagi kelebihan menggunakan Grid ialah ibu bapa mengawal susun atur anak-anak. Jadi anda boleh menambah dan mengalih keluar elemen kanak-kanak tanpa perlu risau tentang melanggar reka letak.

Jadi Bilakah Anda Harus Menggunakan Grid atau Flexbox?

Ringkasnya, Grid CSS sangat bagus apabila anda mahukan kawalan berstruktur daripada perspektif ibu bapa, dengan saiz lajur yang sama tanpa mengira saiz kandungan individunya.

Flexbox, sebaliknya, sesuai apabila anda mahukan sistem yang lebih fleksibel berdasarkan saiz intrinsik elemen.