Utilizing CSS grid in a repetitive manner without the need to specify additional grid areas

I'm experimenting with CSS grid to organize content within certain limitations.

My goal is to have three divs, each 50% wide, with div two and three stacking next to div one.

To accomplish this dynamically using PHP, I utilized grid-template-areas. However, the number of divs may vary, so I want the grid to repeat if necessary.

This is the current code snippet I am working with:

.container {
  display: grid;
  grid-template-columns: 50% 50% 50%;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Grid-1 Grid-2 ."
    "Grid-1 Grid-3 ."
    ". . .";
}

.Grid-2 { grid-area: Grid-2; }

.Grid-3 { grid-area: Grid-3; }

.Grid-1 { grid-area: Grid-1; }


html, body , .container {
  height: 100%;
  margin: 0;
}

.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="Grid-1"></div>
  <div class="Grid-2"></div>
  <div class="Grid-3"></div>
</div>

I am also looking for a way to avoid assigning specific area classes to each dynamically generated div in PHP. Can this be achieved with grid templates?

Answer №1

Just follow the steps below:

.container {
  display: grid;
  grid-template-columns: 50% 50%; /* 2 columns */
  grid-auto-rows:50vh; /* size of one row*/
}
/* make the first div span two rows for every three divs */
.container > :nth-child(3n + 1) { grid-row:span 2 }

.container * {
  border: 1px solid red;
  display: grid;
  place-items: center;
}

.container *:after {
  content:"some content";
}

body {
  margin: 0;
}
<div class="container">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></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 is the best way to position text below an image icon in a menu?

I am having trouble creating a menu that has the same style as shown in this image: . Unfortunately, my menu ends up looking like this instead: . Can someone please help me fix this issue? Here is the HTML code I am working with: <header> ...

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

Align text vertically within labels and links styled with bootstrap

When using bootstrap button styled labels and links with a larger height than default, the text tends to be vertically aligned at the upper side of the button. However, when using an actual button element, the text is centered vertically. Is there a way t ...

Customize the Gap Between Inline Radio Buttons in MaterializeCSS

Help needed to align MaterializeCSS's radio buttons inline without gaps. Thank you in advance for any assistance! Below is a snippet of the code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize ...

Internet Explorer is unable to recognize the .less file format

I have created a less file that works perfectly in Chrome and Firefox, but it is not being recognized in IE 9. Does anyone have suggestions on how to make it run in IE 9.0? Below is a sample of the CSS code: @import "../core/variables.less"; @import "Mi ...

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

Checkbox customization that shifts position when clicked

I seem to be missing something as I can't seem to find a solution for this particular issue. I have implemented custom checkboxes on a list of sentences. Initially, they appear fine, but once you check the first checkbox, it shifts its position. I am ...

Tips on dividing a div into two separate pages when converting to PDF

I am working on an asp.net MVC project and I need to convert a HTML div into a PDF with two separate pages. Here is an example of my code: HTML Code <div class="row" id="mycanvas"> <p>This is the first part of my content.</p> <p ...

CSS trick that works on iOS16 as well

Previously, this CSS workaround was effective up to iOS version 15.6; however, it does not seem to be functioning in iOS 16. @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) {} } Are there any updated techniques avail ...

How to show a tooltip inline by utilizing CSS styling

Working on a sticky side bar menu with a tooltip feature. While it appears correctly in Chrome and Safari, the tooltip is off-center in IE. This snippet seems to be causing the issue: /* Vertically center tooltip content for left/right tooltips */ .tool ...

Navigating to the bottom of a specific element by scrolling

I am currently working on enhancing a module within the application I'm developing. The goal is to automatically scroll the browser window to the bottom of an element when said element's height exceeds the height of the window. The functionality ...

How to add vertical bars within ng-repeat in AngularJS

I attempted to retrieve values from an array variable using ng-repeat within unordered lists. Although the values are displaying correctly and everything is functioning properly, I added vertical bars after each value to represent sub-categories on my page ...

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

My table displays product files, with the option to add notes. If a note is added, it shows in a row. If not, a text area field with a submit button appears instead. Everything seems to be working well, except for the first row without a note. After addin ...

OceanWP Theme with a Fixed Navigation Bar

Currently utilizing the oceanwp theme, I'm aiming to create a topbar that vanishes while scrolling and have the menu smoothly transition to the topbar location with some opacity. I attempted the following code snippet: #site-header { position: fixe ...

Instructions for adjusting the size of my modal window when the keyboard appears?

While developing a next.js app, I encountered an issue with the chat modal. When the input field is in focus, I want to resize the modal height so that the keyboard popup does not hide the input field. I attempted to modify the DOM but could not get it to ...

A two-column bootstrap design with zero padding or gaps

This is the layout I am aiming for: Below is the code I currently have: <div class="row "> <div class="col-lg-6 row-eq-height push-right"> <img src="1.jpg" class="img-responsive"> </div> <d ...

Completely adaptable progress bar that adjusts to any screen size

I need to develop a responsive progress bar that adjusts its width dynamically. However, when I set the width to auto, the progress bar line becomes detached from the stars. How can I resolve this issue and make the progress bar responsive on mobile device ...

The collapsible hamburger navbar is unresponsive and fails to collapse

Currently, I am working on a project that requires my navigation bar to be scaled down to a hamburger menu for mobile view. I have managed to do most of it, but for some reason, the navigation is not collapsing within the hamburger bar. I have been tweakin ...

No display of Tailwind updates on local server in Safari browser using NextJS and a Mac M1

For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...

"Enhance Your CSS Styling with an Additional Dot for Dotted Under

Is it possible to make the dots at the end and sometimes beginning of a word thicker and more round? https://i.stack.imgur.com/W9WPi.png ' CODE <span style="border-bottom: 3px dotted #111;">Personal Project Magazine Ads Personal Project Magaz ...