Blog

CSS Grid 1: Track'ler, fr, repeat(auto-fill, minmax()) ve Named Grid Area'lar

repeat(auto-fill, minmax(14rem, 1fr)) container'a sığdığı kadar kolon açarak media query'siz responsive bir ızgara kurar; auto-fit ise boş kolonları sıfıra indirip item'ları yayar. Bookstore'un katalog ızgarasını ve sayfa iskeletini Grid ile kuruyor, fr ile minmax(0, 1fr) farkını, implicit grid'i, named line'ları, grid-template-areas'ı ve dense'in DOM sırasını nasıl bozduğunu Chromium ve WebKit'te ölçüyoruz.