Адаптивный дизайн с сеткой CSS - PullRequest
Новая
       4

Адаптивный дизайн с сеткой CSS

1 голос
/ 12 марта 2020

Я хотел бы иметь адаптивную версию для этого кода. 

body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
        "navigation-bar content content content";
    margin: 0; padding: 0;
}

.navigation-bar {
    grid-area: navigation-bar;
    height: 100vh;
    background-color: #1a1b20;
}

.content {
    grid-area: content;
    background-color: #202127;
}

<body>
    <div class="navigation-bar"></div>
    <div class="content"></div>
</body>

Что у меня есть: 

@media only screen and (max-width: 600px) {
    body {
    }

    .navigation-bar {
    }

    .content {
    }
}

Я хотел бы иметь navigation-bar на вершине веб-сайт и content под ним.

Это означает:

  1. grid-template-columns должно быть 1fr
  2. высота navigation-bar должна составлять около 25vh

Но я не знаю, каким должно быть grid-template-rows.

Это зависит от content, но если в content нет содержимого, оно должно заполниться весь экран (navigation-bar и content - отдых).

Можете ли вы помочь мне с отзывчивым desige, пожалуйста?

РЕДАКТИРОВАТЬ:

На мобильном телефоне:

enter image description here

1 Ответ

0 голосов
/ 12 марта 2020

Я бы написал базовые стили, используя столбец flex, а затем grid, когда экран больше 600px. Обратите внимание, что в мобильном .content использует flex-grow: 1, что означает, что он заполнит все оставшееся вертикальное пространство. 

.navigation-bar {
  height: 15vh;
  background-color: #1a1b20;
}

.content {
  flex-grow: 1;
  background-color: #202127;  
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: white;
}

@media only screen and (min-width: 600px) {
  body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "navigation-bar content content content";
  }

  .navigation-bar {
    grid-area: navigation-bar;
    height: 100vh;
  }

  .content {
    grid-area: content;
  }
}
<div class="navigation-bar">navbar</div>
<div class="content">content</div>

jsFiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...