Skip to content

Instantly share code, notes, and snippets.

@n-ramdi
Forked from rodenacker/displaygrid.css
Created September 3, 2020 07:39
Show Gist options
  • Save n-ramdi/4770a13dbcd14ee50835b4153d092ee5 to your computer and use it in GitHub Desktop.
Save n-ramdi/4770a13dbcd14ee50835b4153d092ee5 to your computer and use it in GitHub Desktop.
Convert Bootstrap grid to css display:grid
/*migrate bootstrap columns to display:grid*/
@supports (display: grid) {
.row {
display: grid;
grid-template-columns: repeat(12, minmax(10px, 1fr));
grid-gap: 0;
margin: 0;
}
.col-md-1, .col-xs-1, .col-lg-1 {
grid-column: span 1;
}
.col-md-2, .col-xs-2, .col-lg-2 {
grid-column: span 2;
}
.col-md-3, .col-xs-3, .col-lg-3 {
grid-column: span 3;
}
.col-md-4, .col-xs-4, .col-lg-4 {
grid-column: span 4;
}
.col-md-5, .col-xs-5, .col-lg-5 {
grid-column: span 5;
}
.col-md-6, .col-xs-6, .col-lg-6 {
grid-column: span 6;
}
.col-md-7, .col-xs-7, .col-lg-7 {
grid-column: span 7;
}
.col-md-8, .col-xs-8, .col-lg-8 {
grid-column: span 8;
}
.col-md-9, .col-xs-9, .col-lg-9 {
grid-column: span 9;
}
.col-md-10, .col-xs-10, .col-lg-10 {
grid-column: span 10;
}
.col-md-11, .col-xs-11, .col-lg-11 {
grid-column: span 11;
}
.col-md-12, .col-xs-12, .col-lg-12 {
grid-column: span 12;
}
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9 {
width: 100%;
float: none;
padding: 0;
margin: 0;
}
.row:after,
.row:before {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment