Achieve perfect alignment with CSS grid and maintain it as you expand your layout

Question

Achieve perfect alignment with CSS grid and maintain it as you expand your layout

I'm trying to include images along with explanations.

Intended outcome: https://i.sstatic.net/B90hB.png

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

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

Current disappointing result: (not centered) https://i.sstatic.net/gFXZP.png

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

The last image almost aligns in the center but falls short. I am utilizing CSS grid and React MDL frameworks. I will also share my code below. Thank you!

import React from "react";
// rest of the code...

.app-content {
  background: #f1f2f6;
  // rest of the styles...
}

.navbar-header {
  background: #2484c4;
  // rest of the styles...
}

// other styling codes...

import React from "react";
// rest of the code...

I have included all the necessary components. Despite attempting various solutions, none seem to work for me. It's puzzling since I consistently vertically align elements using this method; perhaps it's related to the React MDL framework.

html css reactjs

Answer 1

Answer №1

If you're looking to solve your issue, consider utilizing three layers of div. Enclose the items within the container in another div that follows a flex model structure similar to this:

.container {
  display: flex;
  justify-content: center;
  width: 400px; /* Specify the width of your outermost container */
  height: auto;
}

.wrapper{
  width: auto; /* The wrapper adjusts according to content */
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.item{
  height: 80px; /* Set the height and width of the item */
  width: 80px;
}

For further reference, see an example on Stackblitz.

Answer 2

If you're looking to solve your issue, consider utilizing three layers of div. Enclose the items within the container in another div that follows a flex model structure similar to this:

.container {
  display: flex;
  justify-content: center;
  width: 400px; /* Specify the width of your outermost container */
  height: auto;
}

.wrapper{
  width: auto; /* The wrapper adjusts according to content */
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.item{
  height: 80px; /* Set the height and width of the item */
  width: 80px;
}

For further reference, see an example on Stackblitz.

Achieve perfect alignment with CSS grid and maintain it as you expand your layout

Answer №1

Similar questions

Adjust the appearance of highlighted menu items with CSS to enhance user experience

The top content above the Bootstrap navbar fails to remain fixed in place

Looking to swap out a variable for a fresh new replacement?

SWF file redirection with a flash blast

"Creating a stylish divider between words or sentences: A guide to using HTML and CSS for solid

Developing a quote generator using CSS

A method for generating CSS code from the structure of an HTML document

Unlocking the power of grails arrays within Angular

Unraveling the mysteries of HTML tags with the power of the json_decode

Prevent the tab key from exiting the input field and instead direct it to a designated element on the webpage

How come my overlay consistently extends beyond the boundaries of my image?

Tips for preserving CSS styling following a hover event

Angular 5: ngFor Array issue with updating DOM view not resolved until 2nd click

Tips on accessing a specific element that has been mapped in React?

Issue with localStorage reducer within redux

Choosing a request date that falls within a specified range of dates in PHP Laravel

Guide on showing the D3 Color legend in a horizontal orientation instead of a vertical one

I am having issues with my CSS file not functioning correctly on my Django template. Does anyone have any suggestions on how to resolve this issue

What is the method to retrieve a value from a function call when a button is pressed?

Obtain a Compilation of Video Sources in an HTML5 Format