Как создать следующий макет с помощью CSS-сетки - PullRequest
Новая
       11

Как создать следующий макет с помощью CSS-сетки

0 голосов
/ 01 января 2019

это фактически мой первый пост.

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

Я надеюсь, что вы, ребята, могли быпомогите мне, так как я совсем новичок в CSS-grid.

CSS-GRID макет, который я хочу достичь:

enter image description here

Спасибозаранее!

Ответы [ 3 ]

0 голосов
/ 01 января 2019

Размеры могут быть немного смещены, но вы можете настроить их по своему вкусу.Убедитесь, что вы используете Firefox при использовании сеток, потому что он имеет лучший редактор для отображения сеток и номеров сеток.

https://codepen.io/coltcarnevale/pen/zypOVB

   <div class="container">
  <div class="item item__1">Item 1</div>
  <div class="item item__2">Item 2</div>
  <div class="item item__3">Item 3</div>
  <div class="item item__4">Item 4</div>
  <div class="item item__5">Item 5</div>
  <div class="item item__6">Item 6</div>
  <div class="item item__7">Item 7</div>
  <div class="item item__8">Item 8</div>
</div>

ФАЙЛ CSS 

.container {
  width: 1000px;
  background-color: grey;
  margin: 30px auto;
  padding: 30px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 150px repeat(2, 130px) 200px;

  grid-gap: 30px;
}

.item {
  color: white;
  background-color: red;

  &__2 {
    grid-row: 2 / 3;
  }

  &__3 {
    grid-row: 3 / 4;
  }

  &__4 {
    grid-row: 1 / 4;
    grid-column: 2 / span 2;
  }

  &__5 {
    grid-row: 4 / 5;
  }

  &__6 {
    grid-row: 4 / 5;
  }

  &__7 {
    grid-row: 4 / 5;
  }

  &__8 {
    grid-column: 4 / 5;
    grid-row: 1 / -1;
  }

}
0 голосов
/ 01 января 2019

Это может быть вашей помощи: 

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 80px 80px 80px 160px;
  grid-gap: 10px;
  background-color: white;
  padding: 10px;
}

.grid-container > div {
  background-color: floralwhite;
  padding: 20px 0;
  font-size: 18px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 2;
}



.item3 {
  grid-row-start: 1;
  grid-row-end: 6;
    grid-column-start: 4;
  grid-column-end: 4;
}

.item2 {
  grid-row-start: 1;
  grid-row-end: 4;
    grid-column-start: 2;
  grid-column-end: 4;
}

.item6,.item7,.item8 {
  grid-row-start: 4;
  grid-row-end: 6;

}





</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">item</div>
  <div class="item2">item</div>
  <div class="item3">item</div>
  <div class="item4">item</div>
  <div class="item5">item</div>  
  <div class="item6">item</div>
  <div class="item7">item</div>  
  <div class="item8">item</div>  




</div>


</body>
</html>
0 голосов
/ 01 января 2019

вы можете использовать Boostrap Framework.Вы можете легко разделить ваш сайт с ним.Вот как это реализовать: https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp Вот как разделить сайт: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Теперь исходный код, но помните, что это не то, для чего используется stackoverflow, вы должны провести какое-то исследование при любой попыткечто-то, прежде чем спросить здесь. 

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <style>
            div {border:2px solid black} 
        </style>

    </head>
    <body>
        <div class="row">
            <div class="col-sm-3">
                <div>Item</div>
                <div>Item</div>
                <div>Item</div>
                <div>Item</div>
            </div>
            <div class="col-sm-6">
                Item
                <div class="row">
                    <div class="col-sm-6">Item</div>
                    <div class="col-sm-6">Item</div>
                </div>
            </div>
            <div class="col-sm-3">
                Item
            </div>
      </div>
    </body>
</html>
...