How can i create a Bootstrap like 12 column ( only grid ) grid system using new CSS GRID Layout

Question

How can I create a bootstrap-like 12 column grid using the new CSS GRID technology? Can anybody please show me a demo how to do it? I am really getting confused with this new technology. I want to make a simple 12 column grid-like bootstrap using CSS grid. What my approach should be for this?

user_2442099 · Answer

display:grid; allows you to create columns and also rows.

You need to define a grid of 12 columns and set up classes to span so many rows and so many columns, so alike bootsrap classes you can size your element within from 1th to 12th bits of a row, but , unlike bootstrap, it allows you also to span element through rows without extra markup/inbrication:

example:https://codepen.io/gc-nomade/pen/RLjdrM

.grid {
  margin: 1em;
  border: solid lightgray;
  background: lightgray;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2px;
  counter-reset: div;
}

.grid div {
  border: solid;
  text-align: center;
}

.grid div:before {
  counter-increment: div;
  content: 'N°' counter(div);
}

.grid div[class]:after {
  display: block;
  text-align: center;
  background: lightblue;
  content: "Class applied : "attr(class);
  color: crimson;
}


/* spanning cols, complete values missing */

.col-2 {
  grid-column: auto/span 2;
}

.col-3 {
  grid-column: auto/span 3;
}

.col-6 {
  grid-column: auto/span 6;
}

.col-8 {
  grid-column: auto/span 8;
}


/* spanning rows , complete values missing*/

.row-2 {
  grid-row: auto/span 2;
}

Here is 2 usefull link to start playing with CSS grids layout :

https://css-tricks.com/snippets/css/complete-guide-grid/

https://gridbyexample.com/examples/

user_8331815 · Answer

Well it is really easy: define 13 vertical lines with the same distance to each other. Since one is always (and has to be) there, you will only have to create 12 lines with an relative distance to their previous lines) Like this:

/* actual grid code */
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* This creates 12 equally width columns */
  /* Note that one line (the outer left one) is always there → only 12 have to be created */
}


/* For this demo only */
html, body {
  height: 100%;
  width: 100%;
}

.showcase {
  border: 1px solid black;
}

.r1 {grid-column: 1 / 2}
.r2 {grid-column: 2 / 3}
.r3 {grid-column: 3 / 4}
.r4 {grid-column: 4 / 5}
.r5 {grid-column: 5 / 6}
.r6 {grid-column: 6 / 7}
.r7 {grid-column: 7 / 8}
.r8 {grid-column: 8 / 9}
.r9 {grid-column: 9 / 10}
.r10 {grid-column: 10/ 11}
.r11 {grid-column: 11/ 12}
.r12 {grid-column: 12/ 13}

Note, however, that the css-grid is far more powerful than the bootstrap grid, so make sure to use it to its fullest potential. F.e. grid-template-area is really useful. As is naming the columns/rows. (and of course the addition of rows itself is pretty powerful)

You can find a pretty good overview/tutorial here: https://css-tricks.com/snippets/css/complete-guide-grid/

user_8268326 · Answer

You could use a flexbox layout instead.

For that, you create a div which you want the flexbox to be inside:


   Item 1
   Item 2
   Item 3

In CSS, set the display parameter as flex:

.flex-menu {
   display: flex;
   flex-direction: row;
}

Only one html tag nested to the main div is shown per column.

If you don't explicitly say the items positions, the positions will be assigned in the code order. The flexbox menu will look like that:

Item 1 | Item 2 | Item 3

user_8098467 · Answer

It would like this:

.wrapper {
  display: grid;

}
.one {
  grid-column: 1 ;
  grid-row: 1;
}
.two { 
  grid-column: 2;
  grid-row: 1 ;
}
.three {
  grid-column: 3;
  grid-row: 1 ;
}
.four {
  grid-column: 4;
  grid-row: 1;
}
.five {
  grid-column: 5;
  grid-row: 1;
}
.six {
  grid-column: 6;
  grid-row: 1;
}
.seven {
  grid-column: 7;
  grid-row: 1;
}
.eight {
  grid-column: 8;
  grid-row: 1;
}
.nine {
  grid-column: 9;
  grid-row: 1;
}
.ten {
  grid-column: 10;
  grid-row: 1;
}
.eleven {
  grid-column: 11;
  grid-row: 1;
}
.twelve {
  grid-column: 12;
  grid-row: 1;
}


  One
  Two
  Three
  Four
  Five
  Six
  Seven
  Eight
  Nine
  Ten
  Eleven
  Twelve

Keep in mind that the grid has a "grid-row", so it's not going to wrap like Bootstrap with this particular code. I referenced https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout if you need to see more details of it.

user_4471049 · Answer

Adding some makeup to the @G-Cyrillus answer, the accepted answer.

If you would like your columns to be full width at a certain screen sizes for better user experience, then add this at the bottom of the CSS file:

/* Full Width below 768 pixels */
@media only screen and (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
     grid-column: auto/span 12;
  }
}

So Your full code should look like this:

.grid {
  margin: 1em;
  border: solid lightgray;
  background: lightgray;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2px;
  counter-reset: div;
}

.grid div {
  border: solid;
  text-align: center;
}

.grid div:before {
  counter-increment: div;
  content: 'N°' counter(div);
}

.grid div[class]:after {
  display: block;
  text-align: center;
  background: lightblue;
  content: "Class applied : "attr(class);
  color: crimson;
}


/* spanning cols, complete values missing */

.col-2 {
  grid-column: auto/span 2;
}

.col-3 {
  grid-column: auto/span 3;
}

.col-6 {
  grid-column: auto/span 6;
}

.col-8 {
  grid-column: auto/span 8;
}


/* spanning rows , complete values missing*/

.row-2 {
  grid-row: auto/span 2;
}

/* Full Width below 768 pixels */
@media only screen and (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
     grid-column: auto/span 12;
  }
}

How can i create a Bootstrap like 12 column ( only grid ) grid system using new CSS GRID Layout

5 Answers