Organize elements in a grid using CSS styling

I have designed a layout using grids, featuring two menus on the left and right, with a central area for content.

Within the content area, there is a 4x4 grid layout. Here's an example of the 4x4-grid layout: https://codepen.io/mannberg/pen/qemayy

html/pug

body.h-100.body-grid
    div.h-100.menyLeft
      div.h-100.bg-primary.text-light
        div.sidebar-heading.d-flex.justify-content-center
          h2 Left Menu
    div.h-100.mainContent.d-flex.flex-column.justify-content-center
        div.h-100.inner-grid
          each val in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
            div.h-100.card.inner-grid-item.bg-secondary
              center
                h2= val          
    div.h-100.menyRight
      div.h-100.bg-primary.text-light
        div.sidebar-heading.d-flex.justify-content-center
          h2 Right Menu

css

.inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 16px;
}

.inner-grid-item:nth-child(4n) {
  background-color: #20c997 !important;
}

.inner-grid-item:nth-child(3n) {
  background-color: #ffc107 !important;
}

shared css between examples

html, body {
  height: 100% !important;
  margin: 0px;
  padding: 0px;
}

.mainContent {
  padding-top: 18px;
  padding-bottom: 18px;
}

.body-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 0.125fr 1fr 0.125fr;
  grid-template-rows:  100%;
}

Bootstrap4 is essential for some classes used in these examples.

https://i.sstatic.net/eW1jN.png

Another layout features a 2x2 grid in the content area. Here's an example of the 2x2-grid layout: https://codepen.io/mannberg/pen/pMPNOK

html/pug

body.h-100.body-grid
    div.h-100.menyLeft
      div.h-100.bg-primary.text-light
        div.sidebar-heading.d-flex.justify-content-center
          h2 Left Menu
    div.h-100.mainContent.d-flex.flex-column.justify-content-center
        div.h-100.inner-grid2
          each val in [0,1,2,3]
            div.h-100.card.inner-grid-item2.bg-secondary
              center
                h2= val          
    div.h-100.menyRight
      div.h-100.bg-primary.text-light
        div.sidebar-heading.d-flex.justify-content-center
          h2 Right Menu

css

.inner-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;
  grid-gap: 16px;
}

.inner-grid-item2:nth-child(3n) {
  background-color: #e83e8c !important;
}

https://i.sstatic.net/rAVJ3.png

If you want to stack the 2x2-grid grid over the 4x4-grid, you can adjust the z-index values in the CSS class .inner-grid2. Here's an example image of the desired outcome: https://i.sstatic.net/AATSm.png

However, achieving this might require some experimentation with z-index and positioning. If you encounter difficulties, here's a link to a version that didn't turn out as expected: https://codepen.io/mannberg/pen/qemRXa

Please let me know if you need further assistance with using z-index/position to achieve the desired layout.

htmlcsscss-grid

Answer №1

When you apply position:absolute, it removes items from the normal flow of the document.

To position the grid relative to .mainContent, add position:relative to it.

Force innerGrid2 to span 100% by adding width:100%.

html, body {
  height: 100% !important;
  margin: 0px;
  padding: 0px;
}

.menyLeft {
}

.mainContent {
  padding-top: 18px;
  padding-bottom: 18px;
  position:relative;
}

.menyRight {
}

.body-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 0.125fr 1fr 0.125fr;
  grid-template-rows:  100%;
}

.inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 16px;
}

.inner-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;
  grid-gap: 16px;
  position: absolute;
  top: 0;
  z-index: 20;
  width:100%;
}

.inner-grid-item:nth-child(4n) {
  background-color: #20c997 !important;
}

.inner-grid-item:nth-child(3n) {
  background-color: #ffc107 !important;
}

.inner-grid-item2 {
  background-color: rgba(108, 117, 125, 0.8) !important;
}

.inner-grid-item2:nth-child(3n) {
  background-color: rgba(232, 62, 140, 0.8) !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<body class="h-100 body-grid">
  <div class="h-100 menyLeft">
    <div class="h-100 bg-primary text-light">
      <div class="sidebar-heading d-flex justify-content-center">
        <h2>Left Menu</h2>
      </div>
    </div>
  </div>
  <div class="h-100 mainContent d-flex flex-column justify-content-center">
    <div class="h-100 inner-grid">
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>0</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>1</h2>
        </center>
      </div>
      // Remaining grid items omitted for brevity...
    </div>
    <div class="h-100 inner-grid2">
      <div class="h-100 card inner-grid-item2 bg-secondary">
        <center>
          <h2>a</h2>
        </center>
      </div>
      // Remaining grid items omitted for brevity...
    </div>
  </div>
  <div class="h-100 menyRight">
    <div class="h-100 bg-primary text-light">
      <div class="sidebar-heading d-flex justify-content-center">
        <h2>Right Menu</h2>
      </div>
    </div>
  </div>
</body>

Explore this CodePen for reference: https://codepen.io/nobloss/pen/JgNywB

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

similar element with alternate background shade

I have a custom component that I am using multiple times on a Vue page. I want to customize the background color for each instance of this component. Here is the code for my component: <template> <div class="project-card" :style="{backgroundCo ...

cssvue.jscomponents

Save JSON data in an HTML document or vice versa

Hey there, the title of this post might seem a bit unclear but I couldn't think of another way to phrase it. So here's the dilemma: I have some data that is JSON encoded and stored in a .json file: {"foo":"bar", "bar":"foo", "far":"boo"} Additi ...

javascriptjqueryjsonhtmlelectron

Is there a way to modify the color of the horizontal line within react-native-otp-inputs in the React Native platform?

Is there a way to customize the color of the horizontal line in react-native-otp-inputs for react native? I used react-native-otp-inputs to capture user OTP input, but now I want to change the color of the default black horizontal line to white. You can re ...

javascriptcssreactjsreact-native

Interactive horizontal slideshow for hyperlinks - bootstrap framework and model-view-controller architecture

I am currently working on an MVC project that utilizes Bootstrap. My requirement is to have a horizontal menu of links that can slide left and right using arrows (similar to a carousel, but for links instead of images). To be more specific, the menu need ...

jqueryhtmlcssasp.net-mvctwitter-bootstrap

Why is my Tailwind Grid displaying elements in a horizontal layout?

<div className='grid grid-cols-12 gap-12 mb-8'> <div className='col-span-8'> <div className='box'></div> </div> <div className='col-span-4'> <d ...

cssnext.jstailwind-csstailwind-ui

How to Access a div from another website using jQuery

I have a question. How can I call a div from another website using JavaScript? Here is the page: Now, I want to call the <div id="testa"> in another page. The other page is called Otherpage.html: jQuery(function($){ $(&ap ...

javascriptjqueryhtml

`Heart-shaped loading bar in Reactjs`

Looking for help in creating a heart-shaped progress loader for a React project. I attempted using CSS but encountered issues with the progress not filling the entire heart design. Below is the code snippet I used. The progress should start from the bottom ...

javascriptcssreactjsmaterial-ui

jquery fails to alter label:before

I have encountered a peculiar issue with jQuery and labels. It's quite strange because everything seems to work fine when I change the background color of a label or its font-weight, but using the :before selector doesn't seem to work. Any thoug ...

jquerycsslabel

Various formatting options on GitHub Pages

As a beginner in programming, I recently deployed my first project to github pages. However, I am facing two issues: While the desktop version of the site looks perfect, the cards on the home page appear unseparated on mobile and iPad devices. Despite try ...

htmlcssgithub-pages

Custom override of SX prop classes with Material-UI theme

I am currently working on customizing a component using the sx MUI prop. <Typography variant='h1' align='center' sx={{ fontSize: '24px', pb: '8px', fontWeight: '700' }} > ...

cssreactjsmaterial-ui

Breaking down a string and then retrieving elements from an array

Just diving into the world of Javascript and jQuery, so I have a simple query. I've got a date that I need to break down into a string and then display it as an array. var date = "12/10/2010"; var dateArray = date.split(/); $('#printbox') ...

javascriptjqueryhtml

How to make Vuetify grid columns wrap and fill the full height

I am facing an issue where the component created using v-card in a grid system does not fill the full height. I tried using d-flex but it did not work as expected. The middle column with a white v-card should occupy the entire column height but it is gett ...

cssvue.jsvuetify.js

Implementing a delay in a CSS menu design while still ensuring compatibility with browsers that do not support JavaScript

I currently have a three-tiered menu that relies on :hover and is controlled by css alone. I am now looking to introduce a slight delay to the hovers, which means transitioning my css :hovers to a .hover class and incorporating jQuery. My concern is whet ...

jqueryhtmlcss

MUI: tips for positioning text next to each other on a page

I need assistance aligning numbers and text side by side, similar to the image shown here: https://i.sstatic.net/gXzOM.jpg However, there is a margin to the right of the text(MASTER I 406), causing the numbers to not be in the correct position. Currently, ...

cssreactjsmaterial-ui

How to alter the color of an inline SVG within an <img> element

Is it possible to change the color of an SVG image, icon, or logo within an inline HTML <img> tag using style="..."? Below is a snippet of my code featuring a button with a logo that I want to change the color of: <a href="#" ...

htmlcsssvgbootstrap-5inline

What is the best way to transfer variables between HTML and PHP?

Greetings! I have a quick query: What is the best practice for transferring variables while developing on your website? - get method, post method, session, cookies, hidden fields, etc. ...

phphtmlvariableswebparameter-passing

Animating slides with CSS Keyframes and React, incorporating toggle slide fade out and slide fade (back) in

I am seeking a solution for toggling a box (div) with slide-out animation and then sliding back in animation (in reverse) upon button press. My requirement is to have no animations during the initial page render. While I can successfully slide the box to ...

javascriptcssreactjscss-animations

Centering text in a D3 donut chart

Struggling with centering text inside a d3 donut chart for a project. While trying to modify a piece of code, I find myself lost in the complexity of it. Despite my efforts, the text added to the center is not perfectly centered. I have attempted various ...

javascriptcssd3.jsdonut-chart

Angular's Validator directive offers powerful validation capabilities for reactive forms

Referenced from: This is the approach I have experimented with: custom-validator.directive.ts import { Directive } from '@angular/core'; import { AbstractControl, FormControl, ValidationErrors } from '@angular/forms'; @Directive({ ...

htmlangulartypescript

Stop the removal of the CSS content property

When a user enters and re-enters their password, I have a form that checks the strength of the password and displays text accordingly. However, I noticed that if a user makes a mistake and uses the backspace to re-enter the password, the text from data-tex ...

javascripthtmlcsscss-selectorspseudo-element