Skip to content

Instantly share code, notes, and snippets.

@gunaevart

gunaevart/index.html

Created July 9, 2017 11:30
Show Gist options
  • Save gunaevart/9a62025bbba0b0cc00ca3e5371182218 to your computer and use it in GitHub Desktop.
Save gunaevart/9a62025bbba0b0cc00ca3e5371182218 to your computer and use it in GitHub Desktop.
Download ZIP
Адаптивная сетка
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Сетка адаптивная</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section>
<div class="wrapper">
<div class="row">
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
<div class="col">Some</div>
</div>
<div class="row">
<div class="col col-lg-2">Some</div>
<div class="col col-lg-2">Some</div>
<div class="col col-lg-2">Some</div>
<div class="col col-lg-2">Some</div>
<div class="col col-lg-2">Some</div>
<div class="col col-lg-2">Some</div>
</div>
<div class="row">
<div class="col col-lg-3">Some</div>
<div class="col col-lg-3">Some</div>
<div class="col col-lg-3">Some</div>
<div class="col col-lg-3">Some</div>
</div>
<div class="row">
<div class="col col-lg-4">Some</div>
<div class="col col-lg-4">Some</div>
<div class="col col-lg-4">Some</div>
</div>
<div class="row">
<div class="col col-lg-6">Some</div>
<div class="col col-lg-6">Some</div>
</div>
<div class="row">
<div class="col col-lg-12">Some</div>
</div>
</div>
</section>
</body>
</html>
Raw
style.css
html, body{
margin: 20px 0 0 0;
background: #232323;
color: #fff;
}
.wrapper{
max-width: 1280px;
padding: 0 15px;
margin: 0 auto;
/*border: 1px solid #ff0;*/
}
.row{
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.col{
width: calc(8.333333333333333% - 30px);
min-height: 400px;
box-sizing: border-box;
margin: 15px;
text-align: center;
background: #777;
}
.col-lg-1{
width: calc(8.333333333333333% - 30px);
}
.col-lg-2{
width: calc(16.66666666666667% - 30px);
}
.col-lg-3{
width: calc(25% - 30px);
}
.col-lg-4{
width: calc(33.33333333% - 30px);
}
.col-lg-5{
width: calc(41.66666667% - 30px);
}
.col-lg-6{
width: calc(50% - 30px);
}
.col-lg-7{
width: calc(58.33333333% - 30px);
}
.col-lg-8{
width: calc(66.66666667% - 30px);
}
.col-lg-9{
width: calc(75% - 30px);
}
.col-lg-10{
width: calc(83.33333333% - 30px);
}
.col-lg-11{
width: calc(91.66666667% - 30px);
}
.col-lg-12{
width: calc(100% - 30px);
}
@media screen and (max-width: 960px){
.col-md-1{
width: calc(8.333333333333333% - 30px);
}
.col-md-2{
width: calc(16.66666666666667% - 30px);
}
.col-md-3{
width: calc(25% - 30px);
}
.col-md-4{
width: calc(33.33333333% - 30px);
}
.col-md-5{
width: calc(41.66666667% - 30px);
}
.col-md-6{
width: calc(50% - 30px);
}
.col-md-7{
width: calc(58.33333333% - 30px);
}
.col-md-8{
width: calc(66.66666667% - 30px);
}
.col-md-9{
width: calc(75% - 30px);
}
.col-md-10{
width: calc(83.33333333% - 30px);
}
.col-md-11{
width: calc(91.66666667% - 30px);
}
.col-md-12{
width: calc(100% - 30px);
}
}
@media screen and (max-width: 640px) {
.col-xs-1{
width: calc(8.333333333333333% - 30px);
}
.col-xs-2{
width: calc(16.66666666666667% - 30px);
}
.col-xs-3{
width: calc(25% - 30px);
}
.col-xs-4{
width: calc(33.33333333% - 30px);
}
.col-xs-5{
width: calc(41.66666667% - 30px);
}
.col-xs-6{
width: calc(50% - 30px);
}
.col-xs-7{
width: calc(58.33333333% - 30px);
}
.col-xs-8{
width: calc(66.66666667% - 30px);
}
.col-xs-9{
width: calc(75% - 30px);
}
.col-xs-10{
width: calc(83.33333333% - 30px);
}
.col-xs-11{
width: calc(91.66666667% - 30px);
}
.col-xs-12{
width: calc(100% - 30px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment