Разделение экрана на четыре блока - PullRequest
Новая
       26

Разделение экрана на четыре блока

1 голос
/ 01 ноября 2019

Моя цель состоит в том, чтобы разбить мой экран на четыре разных блока, которые не имеют одинаковый размер, как на рисунке (первый и второй блоки должны быть одинакового размера). Я попытался использовать bootstrap, который вроде работает, но он делает его прокручиваемым, и я хочу избежать этого. Есть ли способ сделать его не прокручиваемым и иметь каждый блок фиксированного размера? Любые советы будут оценены. Я использую bootstrap и angularjs. enter image description here

Это то, что у меня есть, но я хочу сделать полный экран. https://codepen.io/BrunoTrax/pen/XWWVNgL

<style>
    .wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px [col3-end];
        grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
        background-color: #fff;
        color: #444;
      }

      .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
      }

      .a {
        grid-column: col1-start / col3-start;
        grid-row: row2-start ;
      }
      .b {
        grid-column: col3-start ;
        grid-row: row1-start / row2-end;
      }
      .c {
        grid-column: col1-start;
        grid-row: row1-start ;
      }
      .d {
        grid-column: col2-start ;
        grid-row: row1-start ;
      }
</style>
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

1 Ответ

1 голос
/ 01 ноября 2019

Вы должны проверить CSS "Grid's". По сути, вы можете объявить сетку внутри вашего CSS и использовать свойство grid-template-columns для отображения ваших блоков в различных расположениях. Здесь - хороший ресурс, показывающий, как создать пользовательский макет.

Свойство grid также позволяет вам указывать высоту и ширину, которые устранят проблему с прокруткой.

Проверьте это и начните облагораживать.

CSS 

.grid {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

.grid > header {
  grid-area: head;
  background: #eee;
}

.grid > navLeft {
  grid-area: nav;
  background-color: #a072;
}

.grid > main {
  grid-area: main;
  background-color: #8510ff;
}

.grid > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

HTML 

  <header> Hello</header>
  <navLeft> Hello</navLeft>
  <main> Hello</main>
  <p> Hello</p>
  <p> Hello</p>
</div> ```
...