Overview
Recreate Bootstrap's grid column system from scratch using modern CSS flexbox.
Originally published on Jang Keyte's Blog.
This article covers Build Bootstrap-like Columns with CSS Flexbox — practical notes from real-world web development experience.
Code Examples
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
margin-top: 25px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
[class^="col-"] {
//show Grid
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ccc;
}
[class^="col-"] {
overflow:hidden;
}
/*======== NOW LETS ADD FLEXBOX ========*/
.row {
display: flex;
flex-wrap: wrap;
@for $i from 1 through 12 {
[class*="col-#{$i}"] {
flex: $i 0 (100% / 12 * $i);
}
[class*="col-#{$i}"]:last-child {
flex: 0 0 (100% / 12 * $i);
}
}
@media (min-width: 768px) {
@for $i from 1 through 12 {
[class*="col-sm-#{$i}"] {
flex: $i 0 (100% / 12 * $i);
}
[class*="col-sm-#{$i}"]:last-child {
flex: 0 0 (100% / 12 * $i);
}
}
}
@media (min-width: 992px) {
@for $i from 1 through 12 {
[class*="col-md-#{$i}"] {
flex: $i 0 (100% / 12 * $i);
}
[class*="col-md-#{$i}"]:last-child {
flex: 0 0 (100% / 12 * $i);
}
}
}
@media (min-width: 1200px) {
@for $i from 1 through 12 {
[class*="col-lg-#{$i}"] {
flex: $i 0 (100% / 12 * $i);
}
[class*="col-lg-#{$i}"]:last-child {
flex: 0 0 (100% / 12 * $i);
}
}
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
margin-top: 25px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
[class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ccc;
}
[class^="col-"] {
overflow: hidden;
}
.row [class*="col-1"] {
flex: 1 0 8.3333333333%;
}
.row [class*="col-1"]:last-child {
flex: 0 0 8.3333333333%;
}
.row [class*="col-2"] {
flex: 2 0 16.6666666667%;
}
.row [class*="col-2"]:last-child {
flex: 0 0 16.6666666667%;
}
.row [class*="col-3"] {
flex: 3 0 25%;
}
.row [class*="col-3"]:last-child {
flex: 0 0 25%;
}
.row [class*="col-4"] {
flex: 4 0 33.3333333333%;
}
.row [class*="col-4"]:last-child {
flex: 0 0 33.3333333333%;
}
.row [class*="col-5"] {
flex: 5 0 41.6666666667%;
}
.row [class*="col-5"]:last-child {
flex: 0 0 41.6666666667%;
}
.row [class*="col-6"] {
flex: 6 0 50%;
}
.row [class*="col-6"]:last-child {
flex: 0 0 50%;
}
.row [class*="col-7"] {
flex: 7 0 58.3333333333%;
}
.row [class*="col-7"]:last-child {
flex: 0 0 58.3333333333%;
}
.row [class*="col-8"] {
flex: 8 0 66.6666666667%;
}
.row [class*="col-8"]:last-child {
flex: 0 0 66.6666666667%;
}
.row [class*="col-9"] {
flex: 9 0 75%;
}
.row [class*="col-9"]:last-child {
flex: 0 0 75%;
}
.row [class*="col-10"] {
flex: 10 0 83.3333333333%;
}
.row [class*="col-10"]:last-child {
flex: 0 0 83.3333333333%;
}
.row [class*="col-11"] {
flex: 11 0 91.6666666667%;
}
.row [class*="col-11"]:last-child {
flex: 0 0 91.6666666667%;
}
.row [class*="col-12"] {
flex: 12 0 100%;
}
.row [class*="col-12"]:last-child {
flex: 0 0 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
.row [class*="col-sm-1"] {
flex: 1 0 8.3333333333%;
}
.row [class*="col-sm-1"]:last-child {
flex: 0 0 8.3333333333%;
}
.row [class*="col-sm-2"] {
flex: 2 0 16.6666666667%;
}
.row [class*="col-sm-2"]:last-child {
flex: 0 0 16.6666666667%;
}
.row [class*="col-sm-3"] {
flex: 3 0 25%;
}
.row [class*="col-sm-3"]:last-child {
flex: 0 0 25%;
}
.row [class*="col-sm-4"] {
flex: 4 0 33.3333333333%;
}
.row [class*="col-sm-4"]:last-child {
flex: 0 0 33.3333333333%;
}
.row [class*="col-sm-5"] {
flex: 5 0 41.6666666667%;
}
.row [class*="col-sm-5"]:last-child {
flex: 0 0 41.6666666667%;
}
.row [class*="col-sm-6"] {
flex: 6 0 50%;
}
.row [class*="col-sm-6"]:last-child {
flex: 0 0 50%;
}
.row [class*="col-sm-7"] {
flex: 7 0 58.3333333333%;
}
.row [class*="col-sm-7"]:last-child {
flex: 0 0 58.3333333333%;
}
.row [class*="col-sm-8"] {
flex: 8 0 66.6666666667%;
}
.row [class*="col-sm-8"]:last-child {
flex: 0 0 66.6666666667%;
}
.row [class*="col-sm-9"] {
flex: 9 0 75%;
}
.row [class*="col-sm-9"]:last-child {
flex: 0 0 75%;
}
.row [class*="col-sm-10"] {
flex: 10 0 83.3333333333%;
}
.row [class*="col-sm-10"]:last-child {
flex: 0 0 83.3333333333%;
}
.row [class*="col-sm-11"] {
flex: 11 0 91.6666666667%;
}
.row [class*="col-sm-11"]:last-child {
flex: 0 0 91.6666666667%;
}
.row [class*="col-sm-12"] {
flex: 12 0 100%;
}
.row [class*="col-sm-12"]:last-child {
flex: 0 0 100%;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
.row [class*="col-md-1"] {
flex: 1 0 8.3333333333%;
}
.row [class*="col-md-1"]:last-child {
flex: 0 0 8.3333333333%;
}
.row [class*="col-md-2"] {
flex: 2 0 16.6666666667%;
}
.row [class*="col-md-2"]:last-child {
flex: 0 0 16.6666666667%;
}
.row [class*="col-md-3"] {
flex: 3 0 25%;
}
.row [class*="col-md-3"]:last-child {
flex: 0 0 25%;
}
.row [class*="col-md-4"] {
flex: 4 0 33.3333333333%;
}
.row [class*="col-md-4"]:last-child {
flex: 0 0 33.3333333333%;
}
.row [class*="col-md-5"] {
flex: 5 0 41.6666666667%;
}
.row [class*="col-md-5"]:last-child {
flex: 0 0 41.6666666667%;
}
.row [class*="col-md-6"] {
flex: 6 0 50%;
}
.row [class*="col-md-6"]:last-child {
flex: 0 0 50%;
}
.row [class*="col-md-7"] {
flex: 7 0 58.3333333333%;
}
.row [class*="col-md-7"]:last-child {
flex: 0 0 58.3333333333%;
}
.row [class*="col-md-8"] {
flex: 8 0 66.6666666667%;
}
.row [class*="col-md-8"]:last-child {
flex: 0 0 66.6666666667%;
}
.row [class*="col-md-9"] {
flex: 9 0 75%;
}
.row [class*="col-md-9"]:last-child {
flex: 0 0 75%;
}
.row [class*="col-md-10"] {
flex: 10 0 83.3333333333%;
}
.row [class*="col-md-10"]:last-child {
flex: 0 0 83.3333333333%;
}
.row [class*="col-md-11"] {
flex: 11 0 91.6666666667%;
}
.row [class*="col-md-11"]:last-child {
flex: 0 0 91.6666666667%;
}
.row [class*="col-md-12"] {
flex: 12 0 100%;
}
.row [class*="col-md-12"]:last-child {
flex: 0 0 100%;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
.row [class*="col-lg-1"] {
flex: 1 0 8.3333333333%;
}
.row [class*="col-lg-1"]:last-child {
flex: 0 0 8.3333333333%;
}
.row [class*="col-lg-2"] {
flex: 2 0 16.6666666667%;
}
.row [class*="col-lg-2"]:last-child {
flex: 0 0 16.6666666667%;
}
.row [class*="col-lg-3"] {
flex: 3 0 25%;
}
.row [class*="col-lg-3"]:last-child {
flex: 0 0 25%;
}
.row [class*="col-lg-4"] {
flex: 4 0 33.3333333333%;
}
.row [class*="col-lg-4"]:last-child {
flex: 0 0 33.3333333333%;
}
.row [class*="col-lg-5"] {
flex: 5 0 41.6666666667%;
}
.row [class*="col-lg-5"]:last-child {
flex: 0 0 41.6666666667%;
}
.row [class*="col-lg-6"] {
flex: 6 0 50%;
}
.row [class*="col-lg-6"]:last-child {
flex: 0 0 50%;
}
.row [class*="col-lg-7"] {
flex: 7 0 58.3333333333%;
}
.row [class*="col-lg-7"]:last-child {
flex: 0 0 58.3333333333%;
}
.row [class*="col-lg-8"] {
flex: 8 0 66.6666666667%;
}
.row [class*="col-lg-8"]:last-child {
flex: 0 0 66.6666666667%;
}
.row [class*="col-lg-9"] {
flex: 9 0 75%;
}
.row [class*="col-lg-9"]:last-child {
flex: 0 0 75%;
}
.row [class*="col-lg-10"] {
flex: 10 0 83.3333333333%;
}
.row [class*="col-lg-10"]:last-child {
flex: 0 0 83.3333333333%;
}
.row [class*="col-lg-11"] {
flex: 11 0 91.6666666667%;
}
.row [class*="col-lg-11"]:last-child {
flex: 0 0 91.6666666667%;
}
.row [class*="col-lg-12"] {
flex: 12 0 100%;
}
.row [class*="col-lg-12"]:last-child {
flex: 0 0 100%;
}
}
Read More
For the full Vietnamese version, switch language using the VI | EN toggle above, or visit the original post.
Trong quá trình làm website chắc hẳn 99.99% chúng ta sẽ cần dùng tới Bootstrap để tạo layout cho dễ và nhanh gọn lẹ. Nhưng nếu cứ thế kéo cả bộ CSS và JS của boostrap vào thì sẽ lãng phí rất nhiều tài nguyên không sử dụng và tối ưu dữ liệu, trải nghiệm người dùng.
Ở đây mình trích lọc ra 1 đoạn ngắn CSS đủ dùng để chia layout cho giao diện website cho các loại thiết bị mobile, tablet và desktop. Các bạn có thể thoải mái sử dụng và chia sẻ nhé
SCSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
margin-top: 25px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
[class^="col-"] {
//show Grid
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ccc;
}
[class^="col-"] {
overflow:hidden;
}
/*======== NOW LETS ADD FLEXBOX ========*/
.row {
display: flex;
flex-wrap: wrap;
@for $i from 1 through 12 {
[class*="col-#{$i}"] {
flex: $i 0 (100% / 12 * $i);
}
[class*="col-#{$i}"]:last-child {
flex: 0 0 (100% / 12 * $i);
}
}
@media (min-width: 768px) {
@for $i from 1 through 12 {
[class*="col-sm-#{$i}"] {
flex: $i 0 (100% / 12 * $i);
}
[class*="col-sm-#{$i}"]:last-child {
flex: 0 0 (100% / 12 * $i);
}
}
}
@media (min-width: 992px) {
@for $i from 1 through 12 {
[class*="col-md-#{$i}"] {
flex: $i 0 (100% / 12 * $i);
}
[class*="col-md-#{$i}"]:last-child {
flex: 0 0 (100% / 12 * $i);
}
}
}
@media (min-width: 1200px) {
@for $i from 1 through 12 {
[class*="col-lg-#{$i}"] {
flex: $i 0 (100% / 12 * $i);
}
[class*="col-lg-#{$i}"]:last-child {
flex: 0 0 (100% / 12 * $i);
}
}
}
}
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
margin-top: 25px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
[class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ccc;
}
[class^="col-"] {
overflow: hidden;
}
.row [class*="col-1"] {
flex: 1 0 8.3333333333%;
}
.row [class*="col-1"]:last-child {
flex: 0 0 8.3333333333%;
}
.row [class*="col-2"] {
flex: 2 0 16.6666666667%;
}
.row [class*="col-2"]:last-child {
flex: 0 0 16.6666666667%;
}
.row [class*="col-3"] {
flex: 3 0 25%;
}
.row [class*="col-3"]:last-child {
flex: 0 0 25%;
}
.row [class*="col-4"] {
flex: 4 0 33.3333333333%;
}
.row [class*="col-4"]:last-child {
flex: 0 0 33.3333333333%;
}
.row [class*="col-5"] {
flex: 5 0 41.6666666667%;
}
.row [class*="col-5"]:last-child {
flex: 0 0 41.6666666667%;
}
.row [class*="col-6"] {
flex: 6 0 50%;
}
.row [class*="col-6"]:last-child {
flex: 0 0 50%;
}
.row [class*="col-7"] {
flex: 7 0 58.3333333333%;
}
.row [class*="col-7"]:last-child {
flex: 0 0 58.3333333333%;
}
.row [class*="col-8"] {
flex: 8 0 66.6666666667%;
}
.row [class*="col-8"]:last-child {
flex: 0 0 66.6666666667%;
}
.row [class*="col-9"] {
flex: 9 0 75%;
}
.row [class*="col-9"]:last-child {
flex: 0 0 75%;
}
.row [class*="col-10"] {
flex: 10 0 83.3333333333%;
}
.row [class*="col-10"]:last-child {
flex: 0 0 83.3333333333%;
}
.row [class*="col-11"] {
flex: 11 0 91.6666666667%;
}
.row [class*="col-11"]:last-child {
flex: 0 0 91.6666666667%;
}
.row [class*="col-12"] {
flex: 12 0 100%;
}
.row [class*="col-12"]:last-child {
flex: 0 0 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
.row [class*="col-sm-1"] {
flex: 1 0 8.3333333333%;
}
.row [class*="col-sm-1"]:last-child {
flex: 0 0 8.3333333333%;
}
.row [class*="col-sm-2"] {
flex: 2 0 16.6666666667%;
}
.row [class*="col-sm-2"]:last-child {
flex: 0 0 16.6666666667%;
}
.row [class*="col-sm-3"] {
flex: 3 0 25%;
}
.row [class*="col-sm-3"]:last-child {
flex: 0 0 25%;
}
.row [class*="col-sm-4"] {
flex: 4 0 33.3333333333%;
}
.row [class*="col-sm-4"]:last-child {
flex: 0 0 33.3333333333%;
}
.row [class*="col-sm-5"] {
flex: 5 0 41.6666666667%;
}
.row [class*="col-sm-5"]:last-child {
flex: 0 0 41.6666666667%;
}
.row [class*="col-sm-6"] {
flex: 6 0 50%;
}
.row [class*="col-sm-6"]:last-child {
flex: 0 0 50%;
}
.row [class*="col-sm-7"] {
flex: 7 0 58.3333333333%;
}
.row [class*="col-sm-7"]:last-child {
flex: 0 0 58.3333333333%;
}
.row [class*="col-sm-8"] {
flex: 8 0 66.6666666667%;
}
.row [class*="col-sm-8"]:last-child {
flex: 0 0 66.6666666667%;
}
.row [class*="col-sm-9"] {
flex: 9 0 75%;
}
.row [class*="col-sm-9"]:last-child {
flex: 0 0 75%;
}
.row [class*="col-sm-10"] {
flex: 10 0 83.3333333333%;
}
.row [class*="col-sm-10"]:last-child {
flex: 0 0 83.3333333333%;
}
.row [class*="col-sm-11"] {
flex: 11 0 91.6666666667%;
}
.row [class*="col-sm-11"]:last-child {
flex: 0 0 91.6666666667%;
}
.row [class*="col-sm-12"] {
flex: 12 0 100%;
}
.row [class*="col-sm-12"]:last-child {
flex: 0 0 100%;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
.row [class*="col-md-1"] {
flex: 1 0 8.3333333333%;
}
.row [class*="col-md-1"]:last-child {
flex: 0 0 8.3333333333%;
}
.row [class*="col-md-2"] {
flex: 2 0 16.6666666667%;
}
.row [class*="col-md-2"]:last-child {
flex: 0 0 16.6666666667%;
}
.row [class*="col-md-3"] {
flex: 3 0 25%;
}
.row [class*="col-md-3"]:last-child {
flex: 0 0 25%;
}
.row [class*="col-md-4"] {
flex: 4 0 33.3333333333%;
}
.row [class*="col-md-4"]:last-child {
flex: 0 0 33.3333333333%;
}
.row [class*="col-md-5"] {
flex: 5 0 41.6666666667%;
}
.row [class*="col-md-5"]:last-child {
flex: 0 0 41.6666666667%;
}
.row [class*="col-md-6"] {
flex: 6 0 50%;
}
.row [class*="col-md-6"]:last-child {
flex: 0 0 50%;
}
.row [class*="col-md-7"] {
flex: 7 0 58.3333333333%;
}
.row [class*="col-md-7"]:last-child {
flex: 0 0 58.3333333333%;
}
.row [class*="col-md-8"] {
flex: 8 0 66.6666666667%;
}
.row [class*="col-md-8"]:last-child {
flex: 0 0 66.6666666667%;
}
.row [class*="col-md-9"] {
flex: 9 0 75%;
}
.row [class*="col-md-9"]:last-child {
flex: 0 0 75%;
}
.row [class*="col-md-10"] {
flex: 10 0 83.3333333333%;
}
.row [class*="col-md-10"]:last-child {
flex: 0 0 83.3333333333%;
}
.row [class*="col-md-11"] {
flex: 11 0 91.6666666667%;
}
.row [class*="col-md-11"]:last-child {
flex: 0 0 91.6666666667%;
}
.row [class*="col-md-12"] {
flex: 12 0 100%;
}
.row [class*="col-md-12"]:last-child {
flex: 0 0 100%;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
.row [class*="col-lg-1"] {
flex: 1 0 8.3333333333%;
}
.row [class*="col-lg-1"]:last-child {
flex: 0 0 8.3333333333%;
}
.row [class*="col-lg-2"] {
flex: 2 0 16.6666666667%;
}
.row [class*="col-lg-2"]:last-child {
flex: 0 0 16.6666666667%;
}
.row [class*="col-lg-3"] {
flex: 3 0 25%;
}
.row [class*="col-lg-3"]:last-child {
flex: 0 0 25%;
}
.row [class*="col-lg-4"] {
flex: 4 0 33.3333333333%;
}
.row [class*="col-lg-4"]:last-child {
flex: 0 0 33.3333333333%;
}
.row [class*="col-lg-5"] {
flex: 5 0 41.6666666667%;
}
.row [class*="col-lg-5"]:last-child {
flex: 0 0 41.6666666667%;
}
.row [class*="col-lg-6"] {
flex: 6 0 50%;
}
.row [class*="col-lg-6"]:last-child {
flex: 0 0 50%;
}
.row [class*="col-lg-7"] {
flex: 7 0 58.3333333333%;
}
.row [class*="col-lg-7"]:last-child {
flex: 0 0 58.3333333333%;
}
.row [class*="col-lg-8"] {
flex: 8 0 66.6666666667%;
}
.row [class*="col-lg-8"]:last-child {
flex: 0 0 66.6666666667%;
}
.row [class*="col-lg-9"] {
flex: 9 0 75%;
}
.row [class*="col-lg-9"]:last-child {
flex: 0 0 75%;
}
.row [class*="col-lg-10"] {
flex: 10 0 83.3333333333%;
}
.row [class*="col-lg-10"]:last-child {
flex: 0 0 83.3333333333%;
}
.row [class*="col-lg-11"] {
flex: 11 0 91.6666666667%;
}
.row [class*="col-lg-11"]:last-child {
flex: 0 0 91.6666666667%;
}
.row [class*="col-lg-12"] {
flex: 12 0 100%;
}
.row [class*="col-lg-12"]:last-child {
flex: 0 0 100%;
}
}
Code mẫu tham khảo:https://codepen.io/jangkeyte/pen/GRwzJaW
Thanks for reading!