1 codewithmosh com Layout


Download 29.88 Kb.
Pdf ko'rish
bet3/3
Sana17.06.2023
Hajmi29.88 Kb.
#1540134
1   2   3
Bog'liq
12- Summary (2)

6
codewithmosh.com
Grid
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(2, 100px);
grid-template: repeat(3, 100px) / repeat(2, 100px);
grid-template-areas:
“header header”

“sidebar main”

“footer footer”;
Defining a grid
row-gap: 10px;
column-gap: 20px;
gap: 10px 20px;
Shorthand (row column)
Gaps
justify-items: center;
align-items: center; 
justify-content: center;
align-content: center;
Align the items horizontally within their cell
Align the items vertically within their cell 
Align the grid horizontally within its container 
Align the grid vertically within its container
Alignment


Layout
7
codewithmosh.com
grid-column: 2;
grid-column: 1 / 3; 
grid-column: 1 / -1; 
grid-column: 1 / span 2; 
grid-row: 2 / 4; 
grid-area: header; 
Placing items
display: none;
visibility: hidden;
Hides the element 
Hides the element but keeps the reserved space 
Hiding elements 
@media screen and (min-width: 500px) {

@media screen and (min-width: 500px) and (max-width: 700px) {
}
@media print {
}
Media queries

Document Outline

  • Terms
  • Summary
  • CSS Cheat Sheet
  • Box Model
  • Sizing Elements
  • Overflowing
  • Positioning
  • Floating
  • FlexBox
  • Container properties
  • Item properties
  • Grid
  • Defining a grid
  • Gaps
  • Alignment
  • Placing items
  • Hiding elements
  • Media queries

Download 29.88 Kb.

Do'stlaringiz bilan baham:
1   2   3




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling