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

What Happens When You Click on a Link in Google News Using the Mobile Chrome Browser

When using the Chrome Browser on mobile to open a news link from Google News, a new tab is opened. To return to Google News, users can click on the white-highlighted "left arrow" below or find a small header with a "<" symbol above to navigate back. Ho ...

javascripthtmlcss

What is the method used to incorporate the radial gradient in this design?

As I was browsing the internet, I came across several websites with beautiful natural gradients on their backgrounds. However, I'm puzzled as to how they achieved this effect. It doesn't seem like a simple image file because the gradient adjusts ...

css

Incorrect legend colors in Highcharts pie chart

[![enter image description here][1]][1] There seems to be an issue with the Pie-Chart where the Slice color and the Legend color do not match when the color is set using className. This problem does not occur with some other charts. If you look at the co ...

csschartshighcharts

What do you do when you need to hide a table column that has a colspan

I have been searching for a solution to my unique table structure, but I haven't found any that match my situation. When attempting to hide column A or B, the following code works perfectly: $('table td:nth-child(1),table th:nth-child(1)') ...

jqueryhtmlcsscss-selectors

Problem with CSS: The fixed footer is too wide when set at a width of 100%

I'm experimenting with using percentages instead of pixels and noticing some unusual behavior. Why is my footer extending to the right (beyond the "pagePlaceHolderInner" element)? It works when I assign a specific pixel value to both elements ("pagePl ...

htmlcssresponsive-design

Leverage variables in JavaScript to establish a unique style

function AdjustScale(){ scaleX = window.innerWidth / 1024; scaleY = window.innerHeight / 768; element = document.getElementById("IFM"); element.style.transform = "scale(" + scaleX + ", " + scaleY + ")"; } I'm facing an issue with thi ...

javascriptcss

Start the CSS3 animation in reverse right away

I am trying to achieve a "flashing" effect by adding the .shown class to my #overlay, causing the opacity to fade in for 2 seconds and then immediately reverse, fading out for another 2 seconds. After experimenting with removing the class, I found that it ...

javascripthtmlcss

What is the method to modify the text color of an <option> in a <select> tag?

I am attempting to change the color of only the text "select one option" to grey, but I am having trouble making it work. Here is my code: .grey_color { color: #ccc; font-size: 14px; } <select id="select"> <option selected="selected"> ...

htmlcss

The Main page is being graced by a floating Twitter Bootstrap video

When trying to display a video next to a paragraph, I encountered an issue where the paragraph was taking up 100% of the screen and the video was floating over it, obstructing part of the text. Despite setting the row and cols, the layout wasn't behav ...

htmltwitter-bootstrapvideogridprogram-entry-point

What is the best way to shade the background when a hyperlink is pressed?

I am currently working on customizing the navigation bar for my website. My navbar consists of five elements, and I want to make an element appear darker when it is clicked. Here's what I have attempted so far: Utilizing jQuery to modify the ac ...

phpjqueryhtmlcssnavbar

Create a copy of a JQuery slider

Hello there, I'm a first time poster but have been reading for a while now. I've been working on creating a simple jQuery Slider and I'm facing an issue... I want to create a slider that utilizes minimal jQuery and can be easily duplicated o ...

jqueryhtmlcssslider

Is there a way to shift this div to the bottom and incorporate some quirky pop-up squares?

I am struggling to figure out how to move this div to the bottom. Additionally, I want to create temporary pop-up squares (simple divs) in random directions that will disappear after 50ms. My attempt to float this box to the bottom did not yield the desir ...

jquerycss

Tips for Showing Empty Data in a Nonexistent `<td>` Element within a Table

This particular query appears to be quite simple... I am seeking the HTML code for creating a table: <table> <tr> <th>Heading 1</th> <td>or</td> <th>Heading 2</th> </tr> <tr> ...

htmlcssxhtml

How can I use JQuery to select an element with a style attribute in Internet Explorer?

When using JQuery, I have set my target to be the following: <li style="margin-left: 15px;">blah<li> I am using this code to achieve that: $(".block-category-navigation li[style='margin-left: 15px;']").addClass('sub-menu' ...

jquerycssinternet-explorerjquery-selectorstarget

Developing gaps or margins among table components

Struggling to create spacing between text and an image in an HTML email, but the image just won't budge no matter what I do. Check out my Fiddle here: https://jsfiddle.net/rwcgs0g8/ All I want is for the red "Download your free" image to shift down ...

htmlcss

Tips for applying/styling "All Items Center" and "Space Between Items" in CSS and ReactJS

justify-content: space-evenly; seems to be working correctly, but the desired output is not achieved I am aiming for something like this: https://i.stack.imgur.com/iQoWK.png However, this is what I currently have: https://i.stack.imgur.com/1PxGR.png ...

cssreactjsflexboxjsx

Tips for organizing wells within bootstrap into separate columns

Looking for a way to organize my well list into two separate columns. I've included a link to my Plunker project here: https://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=preview. Below is the view section: <div class="well well-lg" ng-repeat="(key, d ...

cssangularjstwitter-bootstrapangular-ui-bootstrap

Modifying Table Cell Background Color in ReactJS: A Guide to Conditionally Updating Cell Color Without Affecting the Entire Row

I am working on changing the background color of a cell based on its value. Currently, I am utilizing the following library: react-data-table-component Procedure: If the value is above 0, then the cell's background color will be red. Otherwise, th ...

cssreactjsdatatablefrontend

Utilize HTML to resize image to fit within container

I've encountered an issue while working with Adobe Dreamweaver CS5. I added a swap behavior to an image in an html document, expecting it to pop up at its original size and restore on mouse out. However, the swapped image ends up filling the entire sc ...

htmlcssimagedreamweaverswap

The size of the search input and textarea in HTML decreases when viewed on an iPad device

Currently utilizing Bootstrap 3 and AngularJs for this project. Implementing the following markup for the input field with type 'search': <input type="search" class="form-control" id='roomSearch' placeholder="Search" ng-model=&apo ...

htmlcssangularjstwitter-bootstrap