Как создать следующий макет с помощью CSS-сетки
это вообще мой первый пост.
Я бы хотел добиться следующего результата с помощью CSS-сетки, и я не совсем уверен, как это сделать.
Я надеюсь, что вы, ребята, сможете мне помочь, так как я новичок в CSS-сетке.
Макет CSS-GRID, которого я хочу достичь:
Заранее спасибо!
Добро пожаловать в Stack Overflow! Пожалуйста, опубликуйте, что вы пробовали / исследовали до сих пор. Я считаю, что вы можете изучить фреймворк начальной загрузки, чтобы получить общее представление о том, как работает макет сетки.
привет, вы можете начать копать, как работает сетка, а затем попробовать сами css-tricks.com/snippets/css/complete-guide-gridgridbyexample.com Оттуда вы можете получить помощь там, где вы ошиблись или неправильно поняли ...
Ответы 3
вы можете использовать структуру boostrap. Вы можете легко разделить с ним свой сайт. Вот как это реализовать: 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>
Размеры могут немного отличаться, но вы можете отрегулировать их по своему вкусу. Убедитесь, что вы используете 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;
}
}
Это может вам помочь:
<!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>
Найдите минутку, чтобы прочитать это -> stackoverflow.com/help/how-to-ask