CSS Grid Pre Horizontal Scroll

Вопрос

Я хочу иметь блок кода <pre> в макете сетки.

Это должно быть отзывчивым. Когда пространство слишком маленькое, оно должно иметь возможность горизонтальной прокрутки.

Что я сделал

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
      }
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}
<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>

На что это похоже:

Изображение: как это выглядит

Что я хочу

Он должен быть отзывчивым и находиться внутри файла grid-area: a.

Изображение: то, что я хочу


html css css-grid pre
person Community    schedule 03.12.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Установка min-width основного элемента на 0 должна быть достаточной, см. ниже:

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
        min-width: 0;
}
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}
<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>

person Piotr Wicijowski    schedule 03.12.2018

arrow_upward
0
arrow_downward

Делайте вещи в соответствии с функциональными требованиями. Лучший способ использовать медиа-запрос для небольших устройств и сделать прокрутку переполнения. Вот код, просто поместите его в свой файл css.

@media (min-width:320px) and (max-width:667px){
pre{
    width: 260px;
    overflow-x: scroll;
    padding: 20px;
    background: #ccc;
  }
 }
person shahid    schedule 03.12.2018