0

Я делаю pet проект на React и не могу разобраться в том, как сделать хороший 3-х колоночный макет. Я пытался найти ответ в гугле, но не так и не нашёл :(

Идея такая: сайт должен состоять из 3 колонок.

Первая колонка - меню, оно статично. И естественно оно должно скрываться на мобилках.

Вторая колонка - основная информация. Этот блок прокручивается и отображает главную информацию на странице.

Третья колонка - дополнительная. Она существует только на 1200px+ экранах и отображает дополнительную информацию по типу поиска или сортировки, на некоторых страницах его не существует. Эта колонка статична.

Вот, как я сейчас реализую такую логику: добавляю 1 и 3 блоку position:fixed для того, чтобы они оставались на месте. Естественно они вырываются из потока страницы, и поставить главную информация становиться почти что невозможно. Для этого второй колонке я добавляю margin-left с шириной меню и margin-right с шириной дополнительной колонки. После этого я добавляю @media запросы, который изменяют margin left и margin right на точках 1200 и 576px (контрольный точки, на которых скрываются 3 и 1 колонка соответственно). Далее, я должен добавлять класс --expanded главному блоку тогда, когда 3 блока нет на странице для того, чтобы главный блок убрал правый margin. И это я ещё не написал про то, что у меню есть режим "мини", и для того, чтобы всё правильно работало я должен добавлять класс на главную колонку, который бы уменьшал margin-left по необходиости.

В общем это похоже на какой-то жонглирование "мэрджинами" и это сложно правильно реализовать. Может быть есть какой-то вариант сделать эту логику проще? Что-то вроде flex-а, со статичным положением 1 и 3 колонки.

введите сюда описание изображения

0

1 ответ 1

0

Примерно вот так, если я всё правильно понял в Вашем вопросе:

* {
  padding: 0;
  margin: 0;
}

.center-column {
  width: calc(100% - 500px);
  background: red;
  min-height: 300vh;
  /* Для увеличения высоты */
  padding-left: 200px;
}

.left-column {
  width: 200px;
  background: yellow;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

.right-column {
  width: 300px;
  background: green;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}

@media(max-width: 1200px) {
  .right-column {
    display: none;
  }
  .center-column {
    width: calc(100% - 200px);
  }
}

@media(max-width: 576px) {
  .center-column {
    width: 100%;
    padding: 0;
  }
  .left-column {
    display: none;
  }
}
<div class="left-column">
  контент слева
</div>
<div class="center-column">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam blandit sem vel turpis faucibus, eget commodo est suscipit. Sed lacinia dictum tempor. Donec id nulla elit. Donec lectus leo, tristique vel dictum eget, porta vitae ex. Fusce non bibendum
    ex. Vivamus eleifend nunc fringilla ante lacinia blandit. Morbi eget risus in ligula condimentum elementum. Etiam posuere elit eros, eget scelerisque erat sagittis non. Maecenas id urna sed nibh aliquet efficitur at sed erat. Pellentesque dignissim
    dignissim mi, accumsan tincidunt dolor tincidunt non. Aliquam semper nulla quis metus sodales, sed elementum risus faucibus.
  </p>

  <p>
    Cras scelerisque justo erat. Cras egestas eu quam eget commodo. Vivamus luctus metus non aliquet lobortis. Cras vel enim velit. Nulla sed varius quam, sed congue lectus. Aenean tristique libero at est venenatis mollis. Sed sagittis purus ac ante lacinia
    venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a metus non diam fringilla dapibus. Integer ut feugiat metus. Praesent a vulputate velit, vitae ornare nunc. Aliquam a velit ut quam semper aliquam. Vestibulum blandit luctus
    fermentum. Maecenas venenatis nibh orci, sed semper tortor elementum at.
  </p>

  <p>
    Fusce pretium est posuere diam egestas rutrum. Mauris luctus ornare lectus, nec ullamcorper libero sagittis scelerisque. Donec cursus elit vitae dapibus suscipit. Duis nec consectetur felis. Donec vitae massa eget ligula facilisis maximus vel pulvinar
    dolor. Nunc id dapibus metus, sed ultricies justo. Donec dictum purus sit amet aliquet accumsan. Pellentesque orci leo, aliquet vitae semper id, molestie id est. In congue velit ut sollicitudin dictum. Cras lacinia convallis mauris vel dapibus. Class
    aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras et dolor rutrum, dictum odio quis, ullamcorper sapien. Integer sit amet sapien eleifend, efficitur lectus ac, elementum dolor. Sed a augue orci. Suspendisse
    potenti.
  </p>

  <p>
    Donec at lectus eget neque pulvinar consequat eget at magna. Nulla facilisi. Cras lacus nibh, venenatis vel dolor id, aliquet egestas purus. Morbi porta, nisi hendrerit malesuada tempus, velit sapien vehicula enim, ac sagittis diam dui nec purus. Curabitur
    dictum nibh ante, sit amet pulvinar lectus tincidunt eget. Donec tincidunt gravida quam in porta. Aliquam elementum nulla eu bibendum aliquam. Vestibulum nec sagittis quam, non gravida nunc.
  </p>

  <p>
    Nunc quis tellus tristique, malesuada mauris ac, tempus tortor. Etiam id ipsum sollicitudin, sodales eros vehicula, dictum arcu. Etiam convallis sem ante, eget sodales elit interdum non. Integer congue aliquet nisl sit amet aliquam. Nullam fermentum erat
    nisl, a iaculis est dignissim eget. Donec molestie gravida condimentum. Nullam pharetra risus a ipsum semper, eget euismod erat consectetur. Fusce consequat sagittis accumsan. Nullam non purus ex. In hac habitasse platea dictumst. Sed vitae lorem
    imperdiet, iaculis nulla ut, elementum libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  </p>
</div>
<div class="right-column">контент справа</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.