چیت‌شیت CSS Grid

1.feature {2  grid-column: 1 / 3;3  grid-row: 1 / 3;4}

1.wide-card { grid-column: span 2; }2.tall-card { grid-row: span 2; }

1.dashboard {2  display: grid;3  grid-template-areas:4    "header header"5    "nav main"6    "footer footer";7  grid-template-columns: 14rem 1fr;8  gap: 1rem;9}1011.dashboard-header { grid-area: header; }12.dashboard-nav { grid-area: nav; }13.dashboard-main { grid-area: main; }14.dashboard-footer { grid-area: footer; }

1.tiles {2  display: grid;3  grid-auto-flow: row;4          grid-auto-rows: minmax(8rem, auto);5  gap: 0.75rem;6}

1.cards {2  display: grid;3  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));4  gap: 1rem;5}

1.catalog {2  display: grid;3  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));4  gap: 1rem;5}

1.content-grid {2  display: grid;3  grid-template-columns: 1fr;4  gap: 1rem;5}67@media (min-width: 48rem) {8  .content-grid {9    grid-template-columns: 16rem minmax(0, 1fr);10  }11}

1.masonry-like {2  display: grid;3  grid-template-columns: repeat(3, minmax(0, 1fr));4  grid-auto-flow: row dense;5  gap: 1rem;6}

1.grid {2  display: grid;3  place-content: center;4  place-items: stretch;5  gap: 1rem;6}

1.card--featured {2  justify-self: stretch;3  align-self: start;4}

1.cards {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4}56.card {7  display: grid;8  grid-row: span 3;9  grid-template-rows: subgrid;10}

11. ترتیب DOM را با ترتیب معنایی محتوا هماهنگ کنید.22. placement بصری را برای polish استفاده کنید، نه برای بازنویسی جریان محتوا.33. صفحه‌کلید و screen reader را روی layout نهایی آزمایش کنید.