Корректен ли CSS код?

Question

Сделала шапку на Grid, хочу узнать, правильно ли все написала. Опыта работы с Grid мало, поэтому задаю этот вопрос.

Разметка и скомпилированные стили:

Нормально ли использование двух max-content?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body { background: #000; }

.header {
  padding: 5px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 40px;
  grid-template-columns: max-content auto max-content;
  grid-template-areas: "logo nv btn";
  align-items: center;
}
.header__logo {
  grid-area: logo;
  width: 100%;
  max-width: 70px;
  cursor: pointer;
}
.header__nav {
  grid-area: nv;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 20px;
  list-style: none;
  font-family: "Inter-Medium";
}
.header__nav__item {
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  user-select: none;
}
.header__nav__active-tab {
  font-family: "Inter-Bold";
}
.header__btn {
  grid-area: btn;
}
.header__btn__link {
  font-family: "Inter-SemiBold";
  background-color: #000000;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 4px;
  border: 2px solid #ffffff;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}

<div class="header">
  <div>
    <a href="index.html">
      <img class="header__logo" src="img/logo.svg" alt="logo">
    </a>
  </div>
  <ul class="header__nav">
    <li>
      <a class="header__nav__item" href="index.html">Главная</a>
    </li>
    <li>
      <a class="header__nav__item header__nav__active-tab" href="about.html">О проекте</a>
    </li>
    <li>
      <a class="header__nav__item" href="contacts.html">Контакты</a>
    </li>
    <li>
      <a class="header__nav__item" href="team.html">Команда</a>
    </li>
  </ul>
  <div class="header__btn">
    <a class="header__btn__link" href="#" target="_blank">Телеграм</a>
  </div>

Исходник SCSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {

    padding: 5px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;

    display: grid;
    gap: 40px;
    grid-template-columns: 
    max-content
    auto
    max-content;
    grid-template-areas: "logo nv btn";
    align-items: center;

    &__logo {
        grid-area: logo;
        width: 100%;
        max-width: 70px;
        cursor: pointer;
    }

    &__nav {

        grid-area: nv;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: 20px;
        list-style: none;
        font-family: "Inter-Medium";

        &__item {
            cursor: pointer;
            text-decoration: none;
            color: #ffffff;
            user-select: none;
        }

        &__active-tab {
            font-family: "Inter-Bold"; 
        }

    }

    &__btn {
        grid-area: btn;

        &__link {
            font-family: "Inter-SemiBold";
            background-color: #000000;
            color: #ffffff;
            padding: 8px 15px;
            border-radius: 4px;
            border: 2px solid #ffffff;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            user-select: none;
        }
    }

}

БЛОГ НА HUSL

Корректен ли CSS код?

Ответы (0 шт):