markdown レスポンシブ，カラム，インナー

Posted 2021-05-05

レスポンシブ、カラム、インナー
---------------


A [Pen](https://codepen.io/anonie/pen/PoYmoGr) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/PoYmoGr/license).

<div class="inner inner-lg">
	<div class="items">
		<div class="item">item01</div>
		<div class="item">item02</div>
		<div class="item">item03</div>
	</div>
</div>

*, *::before, *::aftr {
	box-sizing: border-box;
}

.inner {
	width: calc( 100% - 256px);
	max-width: 1200px;
	margin: 0 auto;
	background: #eee;
}
@media screen and (max-width: 1520px) and (min-width: 1281px) {
	.inner {
    width: calc(100% - 216px);
	}
}
@media screen and (max-width: 1280px) and (min-width: 768px) {
	.inner {
			width: calc(100% - 184px);
	}
}
@media screen and (max-width: 767px) {
.inner {
    width: 84%;
    max-width: 100%;
	}
}
.inner-lg {
	max-width: 1480px;
}

.items {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.item {
	width: calc( 100% / 3 - ( 60px * 2 / 3));
	max-width: 420px;
}
.item {
	border: 3px solid #ccc;
	background: #fff;
	height: 200px;
	margin-bottom: 80px;
}
@media screen and (max-width: 1279px) and (min-width: 768px) {
	.item {
			width: calc( 100% / 2 - (32px));
			max-width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.item {
			width: 100%;
			max-width: 100%;
			margin-bottom: 24px;
	}
}

## note

### .inner
- width: calc( 100% - 左右合計マージンpx )にすることで一定の左右マージンを保ちながら最大幅を確保  
- max-widthでコンテナ幅の広がり過ぎを制御  
- 左右中央寄せはここで指定  
- 各デバイス用にマージンを調整したものを用意する  

### .inner-lg  
- .innerの最大コンテナ幅を超える要素を作りたい場合のmodifier