@sandhikagalih

Web Programming UNPAS

CSS Grid
Properties
CSS Grid Properties
• grid-template-columns • justify-items • grid-column-start
• grid-template-rows • align-items • grid-column-end
• grid-auto-columns • place-items • grid-row-start
• grid-auto-rows • justify-content • grid-row-end
• grid-auto-flow • align-content • grid-column
• grid-template-areas • place-content • grid-row
• grid-template • grid-area
• grid-column-gap • justify-self
• grid-row-gap • align-self
• grid-gap • place-self
• grid container item
CSS Grid Properties
• grid-template-columns • justify-items
• grid-template-rows • align-items
• grid-auto-columns • place-items
• grid-auto-rows • justify-content
• grid-auto-flow • align-content
• grid-template-areas • place-content
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• grid
CSS Grid Properties
• grid-template-columns • justify-items
• grid-template-rows • align-items
• grid-auto-columns • place-items
• grid-auto-rows • justify-content
• grid-auto-flow • align-content
• grid-template-areas • place-content
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• grid
grid-template-columns &
grid-template-rows
Mendefinisikan kolom / baris dengan cara menuliskan
nilai dipisahkan oleh spasi. Nilai merepresentasikan
ukuran grid track dan spasi merepresentasikan
grid line
• <track-size> : bisa berupa px, %, auto, atau fr (fraction)
• <line-name> : nama yang bisa diberikan pada track
 50px

100px

auto

25% auto 50px

Explicit & Implicit Grid
Auto Columns & Auto Rows
grid-auto-columns &
grid-auto-rows
Mengatur ukuran grid track yang tidak dituliskan
pada grid-template (implicit track)
Auto Flow
grid-auto-flow

Mengatur penempatan item / cell pada grid track,

termasuk yang ditulis secara implicit
Grid Values
• <track-size> : bisa berupa px, %, auto, atau fr (fraction)
• <line-name> : nama yang bisa diberikan pada track
Grid Line Name
• <track-size> : bisa berupa px, %, auto, atau fr (fraction)
• <line-name> : nama yang bisa diberikan pada track
fr (Fraction)
• <track-size> : bisa berupa px, %, auto, atau fr (fraction)
• <line-name> : nama yang bisa diberikan pada track
selesai.
next?
Special Function & Keywords
• repeat()

• min-content & max-content

• minmax()

• auto-fill & auto-fit

terimakasih.
@sandhikagalih
 Dukung Channel WebProgrammingUNPAS dengan donasi ke :

https://saweria.co/sandhikagalih