Доброго времени суток разработчики. Можно как-нибудь навесить на body например
body::after
body::before
Чтобы содержимое body было не ограничено контейнером (как по дефолту). Чтобы 8px grid system не как не мешала и не ограничивала
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #fff;
width: 100vw;
height: 100vh;
background-repeat: repeat, repeat;
background-image:
linear-gradient(rgba(255, 0, 0, 0.4) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 0, 0.4) 1px, transparent 1px);
background-size: 4px 8px, 4px 8px;
background-position: -1px -1px, -1px -1px;
content: '';
}
.grid_system {
background: repeating-linear-gradient(to right, rgba(255, 0, 0, 0.2) 0, rgba(255, 0, 0, 0.2) 74px, transparent 74px, transparent 98px);
background-position: 0 0;
max-width: 960px;
height: 100vh;
margin: 0 auto;
content: '';
display: block;
}
/*body::after {
background: repeating-linear-gradient(to right, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 74px, transparent 74px, transparent 98px);
background-position: 0 0;
max-width: 960px;
height: 100vh;
margin: 0 auto;
content: '';
display: block;
opacity: 0.3;
}*/
</style>
</head>
<body>
<div class="grid_system">
<h1>Grid</h1>
</div>
</body>
</html>
Средний
Простой
