Фронтенд Гайд

.preview {
    position: relative;
    padding-top: 56.25%;
}

.preview {
    aspect-ratio: 16 / 9;
}

<div class="preview">
    <img src="image.jpg" alt="">
</div>
.preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar {
    aspect-ratio: 1 / 1;
}

.poster {
    aspect-ratio: 3 / 4;
}

.video

.hero {
    min-height: 100vh;
}

.hero {
    min-height: 100dvh;
}

<section class="hero">
    <h1>Главный экран</h1>
    <p>Контент всегда помещается в видимую область.</p>
</section>
.hero {
    min-height: 100dvh;

    display: grid;
    place-items: center;
}

100svh
100lvh
100dvh

@media (max-width: 1200px) {
    .title {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .title {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 28px;
    }
}

.title {
    font-size: clamp(28px, 5vw, 64px);
}

clamp(минимум, желаемое значение, максимум)

clamp(28px, 5vw, 64px)

<h1 class="title">
    Большой адаптивный заголовок
</h1>

@media (max-width: 1200px) { ... }
@media (max-width: 768px) { ... }
@media (max-width: 480px) { ... }

.grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

repeat(auto-fit, minmax(250px, 1fr))

[ Карточка ] [ Карточка ] [ Карточка ] [ Карточка ]

[ Карточка ] [ Карточка ]
[ Карточка ] [ Карточка ]

[      Карточка      ]
[      Карточка      ]
[      Карточка      ]

.title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

<h3 class="title">
    Очень длинный заголовок карточки, который обычно занимает несколько строк
</h3>

.title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.title {
    line-height: 24px;
    min-height: 48px;

    display: -webkit-box;
    -webki

.section {
  scroll-margin-top: 80px;
}

<a href="#contacts">Контакты</a>

<section id="contacts" class="section">
  ...
</section>

html {
  scroll-behavior: smooth;
}

.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-title {
  max-width: 18ch;
  text-wrap: balance;
}

.article-text {
  text-wrap: pretty;
}

.card-title {
  font-size: 32px;
  line-height: 1.15;
  text-wrap: balance;
}

.form-field:has(.error) {
  border-color: #ff4d67;
  background: #fff3f5;
}

.card:has(input:checked) {
  border-color: #3185ff;
  transform: translateY(-2px);
}

.item:has(+ .item.active) {
  opacity: 0.6;
}

.card-wrapper {
  container-type: inline-size;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container (min-width: 560px) {
  .card {
    grid-template-columns: 160px 1fr;
  }
}

.title {
  font-size: clamp(24px, 4vw, 64px);
}

.section {
  padding: clamp(20px, 5vw, 80px);
}