Skip to content

Instantly share code, notes, and snippets.

@Balaagha
Created April 15, 2020 14:33
Show Gist options
  • Select an option

  • Save Balaagha/edfe247b6e4845b925683abf3addc126 to your computer and use it in GitHub Desktop.

Select an option

Save Balaagha/edfe247b6e4845b925683abf3addc126 to your computer and use it in GitHub Desktop.
Css grid
*asagida birinci row, ikinci columns dur.fr -> fraksiyadir
grid-template: 150px 250px / 1fr 2fr 1fr; /* qisasi setir ve sutun ucun *//* grid-template-rows: 150px 250px;grid-template-columns: 100px 200px 300px; */
*repeat() fonksiyonu-> grid-template: 150px 250px / repeat(3,1fr); -> bu varyanda uc sutuna beraber olaraq paylayir repeat fonksiyonu ile
*minmax() -> grid-template: 150px 250px / repeat(6,minmax(200px,300px));
*childe verlen order deyeri, onun sirasini mueyyen edir
*.box1{grid-row: 1/2;grid-column: 1/3;}('grid-column: 1/span 2' kimide olar ) -> burda strlerde ancaq 1 ri,sutunlardan da bir le ikini ehate ederek boyuyur box1
* grid-row: 1/2;grid-column: 1/2; ==== grid-area: 1/1/2/2; -> area ile de elemek olur satir baslangici/sunut baslangici/satir sonu/sutun sonu
*parente verlen grid-row-gap:10px; grid-column-gap: 20px; vosluqlar ucundur / qisaldilmisi =? grid-gap: 10px 20px;
*parente grid-template-areas verlir => .container{grid-template-areas: "a b c" "d e f" ;}
childe 'grid-area: d' yazlaraq yeri deyisdirilir => .box1{ grid-area: d;}
Css grid info
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment