Ukuran konten minimum di CSS Grid

Terkadang saat membuat komponen, Anda tiba-tiba melihat scrollbar horizontal yang aneh. Anda terus berusaha untuk memperbaiki segalanya, hanya untuk akhirnya menyadari bahwa alasannya berbeda. Berapa kali Anda menemukan diri Anda dalam situasi ini?

Dalam artikel ini, saya akan membahas masalah rumit yang dapat menghabiskan waktu berjam-jam untuk mencoba-coba. Ini ada hubungannya dengan tata letak grid dan saya pikir itu mungkin layak untuk dibicarakan.

Sebelum memulai artikel, saya ingin menyuarakan beberapa nuansa terlebih dahulu. Berikut beberapa hal yang perlu diperhatikan:

• Anda mengalami masalah di tengah hari. Anda lelah dan masih banyak pekerjaan yang harus dilakukan.

  
  
  
  
  

• Kamu lapar.

  
  
  
  
  

• Sangat mudah bagi Anda untuk melewatkan akar permasalahan karena tidak terkait dengan komponen yang sedang Anda kerjakan.

  
  
  
  
  

Karena itu, mari kita mulai.

Apa yang Anda butuhkan pada akhirnya

Untuk memberi Anda sedikit konteks, berikut adalah tata letak yang saya coba capai. Perhatikan bahwa ada wadah gulir di akhir bagian utama.

Mari kita definisikan masalahnya

Saat mengerjakan bagian dengan wadah pengguliran, saya melihat pengguliran horizontal di seluruh halaman , yang tidak terduga.

display: flex -, . , overflow-x: auto, X.

.section {
  display: flex;
  overflow-x: auto;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. , , .

, , . main - .

, ? , :

• overflow-x: hidden?

  
  
  
  
  

• - ?

  
  
  
  
  

, — . , . — . .

, , CSS (, - - ) , - .

, ? main aside:

<div class="wrapper">
  <main>
    <section class="section"></section>
  </main>
  <aside></aside>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

@media (min-width: 1020px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 248px;
    grid-gap: 40px;
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

1fr. , gap. 100% . , — auto. - ( ).

, . minmax().

.wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  grid-gap: 40px;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. , . CSS-, .main:

1. min-width: 0;

   
   
   
   
   

2. , overflow: hidden;

   
   
   
   
   

. , overflow: hidden.

, , . overflow: hidden .

, , .

, CSS Grid, 21 2021

(Ahmad Shadeed, The Minimum Content Size In CSS Grid, Jan 27, 2021)