Align the middle row using CSS Grids

I am working on creating a grid layout with a size of 4x3, and I would like the second row to be centered as the top row contains four elements.

Here is an example of what I am trying to achieve:

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

Check out the demo code below:

.grid-container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 50% 50%;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

htmlcsscss-grid

Answer №1

Simple to achieve using flex

To center content, add justify-content: center;, and for setting the width, use flex: 0 0 calc(20% - 40px);:

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 30px;
  text-align: center;
  flex: 0 0 calc(20% - 40px);
  padding: 20px;
  margin: 5px;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

Answer №2

A grid with EIGHT columns is the solution you need.

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 50% 50%;
  padding: 10px;
  grid-gap: 4px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  grid-column: span 2
}

.grid-item:nth-child(5) {
  grid-column: 2 / span 2;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</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

There are occasions when the Phaser sprite.kill() function fails to execute

Currently, I am developing games using Phaser and have encountered an issue with the sprite.kill() method. At times, when I invoke sprite.kill(), it appears that Phaser destroys the body for collisions/overlapping, but the visual elements (image and dragg ...

javascripthtmlphaser-framework

The effect of iPad screen orientation on CSS styling

Exploring orientation testing using CSS for iPad. Below is the code snippet from the CSS file: @media only screen and (device-width:768px) and(orientation:portrait) { body { background: green; } } @media only screen and (device-width:768px) and(orient ...

htmlcssipadorientation

Issues with JQuery onclick function on dropdown menu functionality not behaving as desired

Take a look at some example code here. Here's the HTML: <div> HTML<br> <li> <select id="Status" type="text"> <option value="New">New</option> <option value="Complete">Complete</option& ...

jqueryhtml

What is the best way to retrieve the initial <ul> element from a JavaScript document?

Just to clarify, I'm looking to target a specific div with a class and the first <ul> from a document (specifically in blogger). Currently, I have a JavaScript function that grabs the first image and generates a thumbnail as shown below: //< ...

javascripthtml

The navigation bar alignment to the right is malfunctioning

I'm puzzled as to why the navbar-right class is not properly closing out the two navigation bar elements on the right. Despite adding the correct code, it doesn't seem to be working as expected. <nav class="navbar fixed-top navbar-toggleable- ...

csstwitter-bootstrap

Highlighting DOM elements that have recently been modified in Angular

Is there a simple way to change the style of an element when a bound property value changes, without storing a dedicated property in the component? The elements I want to highlight are input form elements: <tr field label="Lieu dépôt"> ...

cssangulartypescriptcontrolvalueaccessor

Ways to dynamically update the content of a variable when the input value is modified

Essentially, I have a straightforward code snippet provided below. It is necessary to update the amount and email whenever those are modified by someone. UPDATE: Credit goes to @ellipsis. Your version is close to perfect, except for the data transmission ...

jqueryhtml

"In the shadows, the .toLowerCase() method of undefined is failing without making a sound, yet the code

It seems that letting things fail in the background is necessary for this example to work consistently. Is there a way to work around this issue? There are instances where I need to check a div with a data-attribute on certain pages and add a class if it ...

javascriptjqueryhtml

What is the best way to switch between displays within an if-else statement?

I've been struggling to toggle the circle on click to reveal the checkmark and hide the circle. I've already implemented the hover effect in CSS where the circle disappears and the checkmark appears. HTML <p class="reme"> <a href="#" ...

jqueryhtmlcssfont-awesome

Determining the Size and Color of Squares in a Treemap Based on Content with D3.js

I encountered an issue with a treemap visualization. I came across an example that is similar to my situation, which can be viewed here: In the demo, you can see that the size of each square in the treemap is determined by the content size. However, all s ...

javascriptjquerycssd3.jstreemap

Interactive Form directly linked to SQLite3 database

Looking for assistance with converting a modal from static, fake data to dynamic data from an SQLite3 database. The goal is to display a table of existing data and allow users to add new rows by clicking a +New button. However, when trying to incorporate ...

javascripthtmljquerycssdjango

Why isn't my background image appearing on the screen?

I'm experiencing an issue with my background image not displaying properly. I am currently using bootstrap 5 and have tried several solutions without success. How can I resolve this problem? html { background: url(https://via.placeholder.com/150 ...

htmlcssbootstrap-4

What is the best way to add rounded corners to tables in Bootstrap 3?

Is there a way to give the top and bottom corners of a table rounded edges? I am currently using Bootstrap 3 tables, but they have no corner radius by default. How can I achieve this effect? ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Notification window when the page is being loaded

My goal is to have a module or alert box display when my website is opened, and then disappear after 5 minutes. To see an example of what I'm looking for, take a look at this website: On that website, there is a facebook.com box that automatically d ...

javascriptjqueryhtmlajaxtwitter-bootstrap

The div containing the background image does not resize properly when using media queries

page in question. I am currently working on a chess board project where each cell is represented by a div element. My goal is to make the board expand beyond certain minimum widths using media queries, but for some reason, this functionality is not working ...

htmlcssangularjsmedia-queries

Can someone guide me on how to customize the CSS of a fab element in Onsen UI?

I've been struggling to change the background color or border of the onsen fab element. I'm working with angular 2 and onsen v2. Even after trying the !important rule, my CSS doesn't seem to take effect unless I disable the fabs default styl ...

cssangularonsen-uionsen-ui2

Using jQuery to insert HTML content into a div element by replacing a specific string

I am faced with a situation where I have <div class="test">hello everyone</div> and the challenge is to replace each instance of "hello" within this div with <h1>helllo</h1> In my attempt, I used $(this).text().replace("hello" ...

jqueryhtml

Creating an MPG4 Video from a Three.js Scene: What Are the Steps?

I am working with a three.js scene that includes numerous animated objects. I am looking to export this animation as an mpg4 video. Here are my questions: What is the best method for exporting a scene to create an mpg4 video? Is it recommended to perfo ...

javajavascripthtmlthree.jswebgl

The output produced by ASP.NET remains unaffected by JQuery or JavaScript interference

I am facing an issue with manipulating a dynamically generated directory tree in HTML format using JavaScript. I have a piece of code that generates the tree server-side in ASP.NET and then tries to add a '+' at the end of each list item using jQ ...

c#jqueryasp.netcss

Permitting the user to remove an option from the antd select widget

I have integrated the antd select component in my React application and I am looking to add a delete option for users. For more details, please refer to the image below:https://i.sstatic.net/ZP4PP.png This is how I attempted to implement it: {tasks.map( ...

cssreactjsselectantd