<span> device</span>

<h1>Container Fixo</h1>

<section class="container">
	<div class="col col-12">
		<div class="item">12 colunas</div>
	</div>
	<div class="col col-6 ">
			<div class="col col-6">
				<div class="item">6 colunas dentro de 6</div>
			</div>
			<div class="col col-6">
				<div class="item">6 colunas dentro de 6</div>
			</div>
	</div>
	<div class="col col-6 ">
		<div class="item">6 colunas</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
</section>

<h1>Container Fluido</h1>

<section class="container-fluid">
	<div class="col col-12">
		<div class="item">12 colunas</div>
	</div>
	<div class="col col-6 ">
		<div class="item">6 colunas</div>
	</div>
	<div class="col col-6 ">
		<div class="item">6 colunas</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
	<div class="col col-1 ">
		<div class="item">1</div>
	</div>
</section>
* {
	box-sizing: border-box;
}

:root {
	--screenSize: "extra small";
	--containerSize: auto; 
	--gutter: 15px;
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	:root {
		--screenSize: "small";
		--containerSize: 550px; 
	}
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	:root {
		--screenSize: "medium";
		--containerSize: 750px; 
	}
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	:root {
		--screenSize: "large";
		--containerSize: 970px; 
	}
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	:root {
		--screenSize: "extra large";
		--containerSize: 1170px; 
	}
}

/* Grid */
.container {
	width: var(--containerSize);
	display: block;
	margin: 0 auto;
}
.container-fluid {
	width: 100%;
	display: block;
}
.container:after {
	content: "";
	display: table;
	clear: both;
}

.col {
	float: left;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.col-12 {
	width: 100%;
}

.col-6 {
	width: 50%;
}

.col-1 {
	width: 8.33333%;
}


/* Visual */
* {
	text-align: center;
}

.item {
	background: #ddd;
	border: 1px solid #bbb;
	padding: 15px;
}
span:before {
	content: var(--screenSize);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.