What is the process for building a grid system similar to Bootstrap's 12-column grid using the new CSS Grid Layout?

Is there a way to implement a 12-column grid system similar to Bootstrap using CSS Grid? I am struggling to understand this new technology and would greatly appreciate it if someone could provide a demo. My goal is to create a simple grid structure resembling the one used in Bootstrap, but utilizing CSS Grid instead. Can anyone offer guidance on how to approach this?

csstwitter-bootstrapgridflexboxcss-grid

Answer №1

Utilizing the power of display:grid;
enables you to effortlessly create both columns and rows.

To make the most of this feature, establish a grid with 12 columns and define classes to span across rows and columns similar to Bootstrap. This allows you to size your elements within the 1st to 12th slots of a row without additional markup or nesting:

For example, visit 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;
}

.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;
}

.row-2 {
  grid-row: auto/span 2;
}
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid">
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-6"></div>
  <div class="col-6"></div>
  <div class="col-2 row-2"></div>
  <div class="col-8"></div>
  <div class="col-2 row-2"></div>
  <div class="col-3"></div>
  <div class="col-2"></div>
  <div class="col-3"></div>
</div>

Ready to explore CSS grids layout? Check these two helpful links:

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

Answer №2

Creating a grid layout is simple: just define 13 vertical lines with an equal distance between each other. Since one line is always present, you only need to create the remaining 12 lines with a relative distance to their previous lines like this:

/* Here's how you can create a grid */
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* This will make 12 equally wide columns */
}

/* Additional styles for demo purposes */
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}
<div class="wrapper" style="height: 100%; width: 100%;">
  <div class="showcase r1">1</div>
  <div class="showcase r2">2</div>
  <div class="showcase r3">3</div>
  <div class="showcase r4">4</div>
  <div class="showcase r5">5</div>
  <div class="showcase r6">6</div>
  <div class="showcase r7">7</div>
  <div class="showcase r8">8</div>
  <div class="showcase r9">9</div>
  <div class="showcase r10">10</div>
  <div class="showcase r11">11</div>
  <div class="showcase r12">12</div>
</div>

Keep in mind that CSS Grid offers more capabilities compared to Bootstrap grid, so utilize its full potential. Features such as grid-template-area and naming columns/rows are powerful tools to enhance your layout.

For a detailed guide on CSS Grid, check out this resource: https://css-tricks.com/snippets/css/complete-guide-grid/

Answer №3

A great alternative is to utilize a flexbox layout.

To implement this, you'll need to create a div where the flexbox will reside:

<div class="flex-menu">
   <a>Item 1</a>
   <a>Item 2</a>
   <a>Item 3</a>
</div>

In your CSS file, specify the display property as flex:

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

Each html tag inside the main div represents a column in the layout.

If you do not define specific positions for the items, they will be arranged according to the code's order. The resulting flexbox menu will appear like this:

Item 1 | Item 2 | Item 3

Answer №4

Here is an example:

.container {
  display: grid;

}
.item1 {
  grid-column: 1 ;
  grid-row: 1;
}
.item2 { 
  grid-column: 2;
  grid-row: 1 ;
}
.item3 {
  grid-column: 3;
  grid-row: 1 ;
}
.item4 {
  grid-column: 4;
  grid-row: 1;
}
.item5 {
  grid-column: 5;
  grid-row: 1;
}
.item6 {
  grid-column: 6;
  grid-row: 1;
}
.item7 {
  grid-column: 7;
  grid-row: 1;
}
.item8 {
  grid-column: 8;
  grid-row: 1;
}
.item9 {
  grid-column: 9;
  grid-row: 1;
}
.item10 {
  grid-column: 10;
  grid-row: 1;
}
.item11 {
  grid-column: 11;
  grid-row: 1;
}
.item12 {
  grid-column: 12;
  grid-row: 1;
}
<div class="container">
  <div class="item1">Item One</div>
  <div class="item2">Item Two</div>
  <div class="item3">Item Three</div>
  <div class="item4">Item Four</div>
  <div class="item5">Item Five</div>
  <div class="item6">Item Six</div>
  <div class="item7">Item Seven</div>
  <div class="item8">Item Eight</div>
  <div class="item9">Item Nine</div>
  <div class="item10">Item Ten</div>
  <div class="item11">Item Eleven</div>
  <div class="item12">Item Twelve</div>
</div>

Remember that the grid layout has a "grid-row", so it will not wrap like Bootstrap using this specific code. For more information on CSS Grid Layout, you can visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout.

Answer №5

Expanding upon the @G-Cyrillus response, which is the approved solution.

To ensure a better user experience on certain screen sizes by making your columns full width, insert this code snippet at the end of your 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;
  }
}

Here is how your complete code should appear:

.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;
  }
}
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid">
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-6"></div>
  <div class="col-6"></div>
  <div class="col-2 row-2"></div>
  <div class="col-8"></div>
  <div class="col-2 row-2"></div>
  <div class="col-3"></div>
  <div class="col-2"></div>
  <div class="col-3"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When flex items are stacked in a column, the bottom portion may be truncated

(Edit) Check out the codepen example here. I am working on creating a stack of cards using Vue.js and flexbox to showcase different apps on my website. Each card is represented by a component and I utilize Vue's `for` function to display cards with t ...

htmlcssvue.jssass

Using DIV to "enclose" all the elements inside

I need assistance with my HTML code. Here is what I have: <div id="cover" on-tap="_overlayTapped" class$="{{status}}"> <form method="POST" action="/some/action"> <input required id="name" name="name" label="Your name"></input> ...

javascripthtmlcssajax

Assistance needed with CSS - making an element occupy the entire remaining vertical space

Although I'm quite confident in my CSS/XHTML abilities, this particular issue has me stumped. You can view the problem here: - (please note that the website is still under development, most features are not functional, and it's subject to frequ ...

cssxhtml

Floating dropdown within a scrolling box

How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...

javascriptjqueryhtmlcss

The active link color for navigation in Bootstrap 4

I am trying to update the active menu links to display in green on my website. Despite various attempts, I have not been successful in changing the color. Can anyone provide guidance on how to proceed? My website is built with Bootstrap 4 and mdbootstrap. ...

cssbootstrap-4navigationbar

How can I remove the div container every time the submit button is clicked?

I am currently working on a form that is capturing values as shown below. <form role="form" id="calculate"> <div class="form-group"> <select class="form-control" id="paper"> < ...

javascripthtmlcss

I am currently dedicated to enhancing my background transitions and experimenting with creating smooth fade-ins

I'm almost done with my Weather Forecast page for the FCC challenge. However, I'm not satisfied with how the code for swapping the background works. It just doesn't feel right to me. Unfortunately, I can't figure out how to fix it. Addi ...

javascriptjqueryhtmlcss

Utilizing gradient effects on table backgrounds with html/css

Trying to enhance my responsive table by adding a gradient background, but encountering an issue where the style being applied is repeating in every cell, creating a messy look. Here's the gradient I'm using: background: linear-gradient(to right ...

htmlcsshtml-tablegradient

What is the best way to move between websites or pages without having to reload the current page using a selector?

Have you ever wondered how to create a webpage where users can navigate to other websites or pages without seeing their address, simply by selecting from a drop-down menu? Take a look at this example. Another similar example can be found here. When visit ...

javascriptphphtmlcssajax

Overlap of Navigation and Logo Divs on Mobile Website

Trying to optimize my website for mobile at coveartschildcare.com, but the header divs keep overlapping and nothing I do seems to fix it. Here's the CSS code I'm currently using: @media only screen and (min-device-width: 320px) and (max-devi ...

htmlcssmobileoverlapping

What is the method for turning off Bootstrap for viewport width below a specific threshold?

I'm currently utilizing bootstrap for my website design. However, there's a particular CSS rule causing some frustration on one specific page: @media (min-width: 576px) .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-w ...

htmlcsstwitter-bootstrap

Using Angular to convert JSON data to PDF format and send it to the printer

Currently, I am retrieving JSON data from an API and now need to convert this data into a PDF format for printing. I am encountering an issue where the CSS styling for page breaks is not rendering properly within my Angular component. When I test the same ...

cssjsonangularpage-break

What is the best way to add three dots at the end of text when it exceeds the available space?

What CSS property is utilized to display three dots at the end of text when it overflows? ...

htmlcss

Using Bootstrap 4: How to maximize the width of a span element placed near a label

I need to adjust the width of a span next to its label in my project. My goal is to show multiple groups {label / data} on the same line. To achieve this, I divided the row into 4 columns and tried to set a specific width for a span. However, no matter wh ...

htmlcssbootstrap-4

Toggle the visibility of an element with a single button click

Below is a snippet of my sample code: SAMPLE HTML CODE: <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <l ...

javascriptjqueryhtmlcss

What are the main differences between Fluid Layout and Grid?

It seems like there's some vital information I haven't come across yet. Are fluid layouts and grid layouts interchangeable? I keep hearing about this baseline concept, but I can't quite grasp its purpose. Does it serve as a guide for alignin ...

htmlcssfluid-layoutgrid-layoutbaseline

Bootstrap table exceeds the boundaries of the smartphone screen

I'm currently working on my first laravel project with bootstrap (https://getbootstrap.com/) and I've encountered an issue related to mobile device responsiveness. The problem arises when using a basic table in bootstrap4 (the absence of the res ...

htmlcsstwitter-bootstrap

The max-width attribute is failing to apply to the form within the Bootstrap framework

login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...

htmlcssbootstrap-4

Utilizing Bootstrap divs for multiline display in Yii2 platform

Currently, I am utilizing a list in Bootstrap CSS which is responsive and beneficial. However, I am faced with the challenge of creating a notification list with lengthy text akin to that on Facebook. My query pertains to the technique required to make th ...

jqueryhtmlcsstwitter-bootstrap

The mobile page is refusing to scroll, causing all the text to bunch up at the top of the screen

After learning HTML/CSS/Js/PhP over a few months, I recently completed my first website. I am facing an issue with one of the pages on my website when viewed on a mobile device. The parallax scrolling header image does not scroll either horizontally or ve ...

htmlcss