Is it possible to center-align content in a grid container?

Question

Is it possible to center-align content in a grid container?

Is it possible to populate a grid starting from the center?

I am working with a CSS grid container that has dynamic content (the number of children is not fixed and gets updated regularly). Here is my current setup:

#container { 
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

When all four columns are filled, it looks like this:

1 2 3 4 //Numbers represent children of containers

This layout works well for me. However, I encounter an issue when there are only two divs inside the main container, resulting in the following configuration:

1 2 0 0

What I would like to achieve is the following instead:

0 1 2 0

html css css-grid

Answer 1

Answer №1

UNIQUE RESPONSE:

If you are looking to work with the grid layout and have only four columns with configurations such as 0 1 0 0, 0 1 1 0, 0 1 1 1, 1 1 1 1, then you can use the following CSS:

.container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.col {
  height: 50px;
  background: green;
}

.col:first-child {
  grid-column-start: 2;
}

.col:first-child:nth-last-child(4) {
  grid-column-start: 1;
}

If your HTML structure is similar to this:

<div class="container">
  <div class="col">
  Column
  </div>
  <!-- Other Columns Here -->
</div>

You can see a live example in action on this Working Fiddle

Answer 2

UNIQUE RESPONSE:

If you are looking to work with the grid layout and have only four columns with configurations such as 0 1 0 0, 0 1 1 0, 0 1 1 1, 1 1 1 1, then you can use the following CSS:

.container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.col {
  height: 50px;
  background: green;
}

.col:first-child {
  grid-column-start: 2;
}

.col:first-child:nth-last-child(4) {
  grid-column-start: 1;
}

If your HTML structure is similar to this:

<div class="container">
  <div class="col">
  Column
  </div>
  <!-- Other Columns Here -->
</div>

You can see a live example in action on this Working Fiddle

Answer 3

Answer №2

It has been mentioned that Flexbox is the ideal choice for this scenario, however, a combination of specific properties can also achieve the desired result.

The following properties can be utilized:

grid-auto-flow: column;
grid-auto-columns: 25%; // assuming 4 columns
justify-content: center;

document.querySelectorAll('input')[0].onclick = () => { document.querySelector('[container]').append(document.createElement('div')) }
document.querySelectorAll('input')[1].onclick = () => { document.querySelector('[container]').innerHTML = '<div></div>'; }

body * {
  padding: 10px;
  border: 1px solid;
}

[container] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 25%;
  justify-content: center;
}

[container]>div {
  height: 50px;
  background: orange;
}

<input type="button" value="Add Column" />
<input type="button" value="Reset" />
<div container>
  <div></div>
</div>

Answer 4

It has been mentioned that Flexbox is the ideal choice for this scenario, however, a combination of specific properties can also achieve the desired result.

The following properties can be utilized:

grid-auto-flow: column;
grid-auto-columns: 25%; // assuming 4 columns
justify-content: center;

document.querySelectorAll('input')[0].onclick = () => { document.querySelector('[container]').append(document.createElement('div')) }
document.querySelectorAll('input')[1].onclick = () => { document.querySelector('[container]').innerHTML = '<div></div>'; }

body * {
  padding: 10px;
  border: 1px solid;
}

[container] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 25%;
  justify-content: center;
}

[container]>div {
  height: 50px;
  background: orange;
}

<input type="button" value="Add Column" />
<input type="button" value="Reset" />
<div container>
  <div></div>
</div>

Is it possible to center-align content in a grid container?

Answer №1

Answer №2

Similar questions

Ways to conceal ad container when ad space remains empty

Looking to extract the hidden value from an HTML input field using Selenium

An alternative method to confirm the checkbox selection without physically clicking on it

Displaying markers on a Google map by fetching data from a MySQL database in PHP

What steps can I take to resolve the TypeError issue with tailwindcss-cli where it is throwing an error stating that Object.fromEntries is

Incorporate a CSS style sheet into the app_offline file

Maintain the layout of HTML page while reducing the window size

Switching out images in a responsive column grid on hover using JQuery

Tips for Concealing PHP Undefined Error Messages Using Echo

Changing the size of the Modal Panel in Ui Bootstrap for a customized look

Implementing asynchronous image loading with Angular 4 using bearer headers

Heroku's chat server allows for seamless communication among users

Attempting to retrieve the position of an image within an array upon clicking

The hierarchy of styles in Rails CSS/SCSS

What is the best way to implement a partial color filter on an image using CSS?

Positioning a div above a Bootstrap navbar that disappears when scrolling

Example of using the CSS property white-space with break-spaces

Arranging two columns side by side with Bootstrap

Hover effect on two divs changing states

I am in search of a clean and efficient method to modify the class of a link that triggers an HTMX request in Django. Perhaps something like "auto-refresh" or a similar solution would be ideal