Bagaimanakah `justify-content`, `justify-item` dan `justify-self` Berbeza dalam Grid CSS?

Merungkai Enigma: justify-self, justify-item, and justify-content in CSS Grid

Walaupun namanya biasa, justify-self, justify-item, dan justify-kandungan dalam CSS Grid berbeza dengan ketara daripada rakan sejawat Flexbox mereka. Mari kita terokai peranan dan perbezaan mereka dalam reka letak grid.

Mentakrifkan Fungsi Mereka

• justify-content: Mentadbir pengedaran lajur grid di sepanjang paksi baris.
• justify-item: Menjajarkan kandungan dalam item grid individu di sepanjang paksi baris.
• justify-self: Menjajarkan item grid individu sepanjang paksi baris dalam baris grid induknya.

Memahami Perbezaan

Walaupun hartanah berkongsi beberapa persamaan dengan rakan Flexbox mereka, mereka mempunyai perbezaan utama dalam grid konteks.

• Perbezaan Flexbox dan Grid: Tidak seperti Flexbox, CSS Grid tidak melaksanakan justify-self dan justify-item. Ini berpunca daripada sifat satu dimensi Flexbox, di mana berbilang item boleh wujud di sepanjang paksi.
• Item lwn. Kandungan Item: justify-item mempengaruhi peletakan kandungan dalam item grid, manakala justify -sendiri mengawal kedudukan item grid itu sendiri dalam baris masing-masing.

Visual Gambaran

Rujuk tangkapan skrin yang dilampirkan untuk gambaran visual kesan setiap sifat.

Sumber Tambahan

Untuk panduan dan inspirasi lanjut, pertimbangkan sumber ini:

• MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
• Smashing Magazine: https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
• Cabaran Grid CSS: https://www.smashingmagazine.com/2017/10/ css-grid-challenge-2017-winners/

Atas ialah kandungan terperinci Bagaimanakah `justify-content`, `justify-item` dan `justify-self` Berbeza dalam Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!