Combining left-aligned and centered elements within a grid using flexbox

Question

Combining left-aligned and centered elements within a grid using flexbox

Looking to create a fluid responsive grid layout using flexbox, without the need for media queries. The number of elements in the grid can vary and each item should have a fixed, equal width with left alignment. The entire group should have equal left and right margins.

Here's an example of what I'm aiming for:

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

This is how I attempted to achieve it:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: auto;
}
.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
</div>

Unfortunately, this approach did not yield the desired results:

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

I had hoped that by setting margin: auto on the container, it would size itself to accommodate an optimal number of items per row.

While solutions like Bootstrap or Foundation would make this task easier, I am curious if it can be achieved using flexbox alone.

css flexbox

Answer 1

Answer №1

CSS Grid

Implementing CSS Grid is a stylish and adaptable solution for layout design.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: 200px;
  grid-gap: 10px;
  justify-content: center;
}

.item {
  background-color: purple;
  padding: 10px;
}

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
</div>

However, it may lack support in older browsers like IE, requiring the use of Javascript to achieve similar functionality due to flexbox issues with width distribution.

Javascript Approach

The Javascript method calculates the necessary margin-left value to centrally align flexbox items, ensuring compatibility despite initial markup settings.

// get width of element with margins
function getOuterWidth(el) {
  var styles = window.getComputedStyle(el);
  var margins = parseFloat(styles["marginLeft"]) +
    parseFloat(styles["marginRight"]);

  return Math.ceil(el.getBoundingClientRect().width + margins);
}

// get width of element without paddings
function getContentWidth(el) {
  var styles = window.getComputedStyle(el);
  var paddings = parseFloat(styles["paddingLeft"]) +
    parseFloat(styles["paddingRight"]);

  return Math.ceil(el.getBoundingClientRect().width - paddings);
}

// Get top of element
function getTopOfElement(el) {
  return el.getBoundingClientRect().top;
}

var container = document.querySelector(".container");
var initialMarginLeft = parseFloat(window.getComputedStyle(container)["marginLeft"]);
// getting array of items
var items = Array.prototype.slice.call(document.querySelectorAll(".item"));

function centerItems() {
  if (items.length === 0) return 0;

  // set margin-left to initial value to recalculate it
  container.style.marginLeft = initialMarginLeft + "px";

  var topOfFirstItem = getTopOfElement(items[0]);
  var spaceTakenByElementsOnFirstLine = getOuterWidth(items[0]);

  for (var i = 1; i < items.length; i++) {
    // Break in case we are in second line
    if (getTopOfElement(items[i]) > topOfFirstItem)
      break;
    spaceTakenByElementsOnFirstLine += getOuterWidth(items[i]);
  }

  // Set margin-left to center elements
  var marginLeft = initialMarginLeft + (getContentWidth(container) - spaceTakenByElementsOnFirstLine) / 2;

  container.style.marginLeft = marginLeft + "px";
};

window.addEventListener("resize", centerItems);

centerItems();

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
</div>

jQuery Implementation

// get width of element with margins
function getOuterWidth(el) {
  return $(el).outerWidth(true);
}

// get width of element without paddings
function getContentWidth(el) {
  return parseFloat($(el).css("width"));
}

function getTopOfElement(el) {
  return $(el).position().top;
}

var $container = $(".container");
var $items = $(".item");
var initialMarginLeft = parseFloat($container.css("margin-left"));

function centerItems() {
  if ($items.length === 0) return 0;

  // set margin-left to initial value to recalculate it
  $container.css("margin-left", initialMarginLeft + "px");

  var topOfFirstItem = getTopOfElement($items[0]);
  var spaceTakenByElementsOnFirstLine = getOuterWidth($items[0]);

  for (var i = 1; i < $items.length; i++) {
    // Break in case we are in second line
    if (getTopOfElement($items[i]) > topOfFirstItem)
      break;
    spaceTakenByElementsOnFirstLine += getOuterWidth($items[i]);
  }

  // Set margin left to center elements
  var marginLeft = initialMarginLeft + (getContentWidth($container) - spaceTakenByElementsOnFirstLine) / 2;

  $container.css("margin-left", marginLeft + "px");
};

$(window).resize(centerItems);

centerItems();

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">...etc...</div>
  <div class="item">Flex item 5</div>
</div>

Answer 2

CSS Grid

Implementing CSS Grid is a stylish and adaptable solution for layout design.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: 200px;
  grid-gap: 10px;
  justify-content: center;
}

.item {
  background-color: purple;
  padding: 10px;
}

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
</div>

However, it may lack support in older browsers like IE, requiring the use of Javascript to achieve similar functionality due to flexbox issues with width distribution.

Javascript Approach

The Javascript method calculates the necessary margin-left value to centrally align flexbox items, ensuring compatibility despite initial markup settings.

// get width of element with margins
function getOuterWidth(el) {
  var styles = window.getComputedStyle(el);
  var margins = parseFloat(styles["marginLeft"]) +
    parseFloat(styles["marginRight"]);

  return Math.ceil(el.getBoundingClientRect().width + margins);
}

// get width of element without paddings
function getContentWidth(el) {
  var styles = window.getComputedStyle(el);
  var paddings = parseFloat(styles["paddingLeft"]) +
    parseFloat(styles["paddingRight"]);

  return Math.ceil(el.getBoundingClientRect().width - paddings);
}

// Get top of element
function getTopOfElement(el) {
  return el.getBoundingClientRect().top;
}

var container = document.querySelector(".container");
var initialMarginLeft = parseFloat(window.getComputedStyle(container)["marginLeft"]);
// getting array of items
var items = Array.prototype.slice.call(document.querySelectorAll(".item"));

function centerItems() {
  if (items.length === 0) return 0;

  // set margin-left to initial value to recalculate it
  container.style.marginLeft = initialMarginLeft + "px";

  var topOfFirstItem = getTopOfElement(items[0]);
  var spaceTakenByElementsOnFirstLine = getOuterWidth(items[0]);

  for (var i = 1; i < items.length; i++) {
    // Break in case we are in second line
    if (getTopOfElement(items[i]) > topOfFirstItem)
      break;
    spaceTakenByElementsOnFirstLine += getOuterWidth(items[i]);
  }

  // Set margin-left to center elements
  var marginLeft = initialMarginLeft + (getContentWidth(container) - spaceTakenByElementsOnFirstLine) / 2;

  container.style.marginLeft = marginLeft + "px";
};

window.addEventListener("resize", centerItems);

centerItems();

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
</div>

jQuery Implementation

// get width of element with margins
function getOuterWidth(el) {
  return $(el).outerWidth(true);
}

// get width of element without paddings
function getContentWidth(el) {
  return parseFloat($(el).css("width"));
}

function getTopOfElement(el) {
  return $(el).position().top;
}

var $container = $(".container");
var $items = $(".item");
var initialMarginLeft = parseFloat($container.css("margin-left"));

function centerItems() {
  if ($items.length === 0) return 0;

  // set margin-left to initial value to recalculate it
  $container.css("margin-left", initialMarginLeft + "px");

  var topOfFirstItem = getTopOfElement($items[0]);
  var spaceTakenByElementsOnFirstLine = getOuterWidth($items[0]);

  for (var i = 1; i < $items.length; i++) {
    // Break in case we are in second line
    if (getTopOfElement($items[i]) > topOfFirstItem)
      break;
    spaceTakenByElementsOnFirstLine += getOuterWidth($items[i]);
  }

  // Set margin left to center elements
  var marginLeft = initialMarginLeft + (getContentWidth($container) - spaceTakenByElementsOnFirstLine) / 2;

  $container.css("margin-left", marginLeft + "px");
};

$(window).resize(centerItems);

centerItems();

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">...etc...</div>
  <div class="item">Flex item 5</div>
</div>

Answer 3

Answer №2

If you're looking for a simple solution, one approach is to include a series of invisible, zero-height items at the end of your regular items:

<div class="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
</div>

Additionally,

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.parent .item,
.parent .dummyItem{
  width: 50px;
  height: 50px;
  background: white;
  margin: 5px;
}

.parent .dummyItem {
  height: 0;
}

If the longest row in your layout can accommodate n visible items, you will need at least n-1 dummy items for this method to be effective.

The only drawback to this technique is that if there is only one row of items, they may not be perfectly centered but rather aligned mostly to the left.

View Codepen Example.

Answer 4

If you're looking for a simple solution, one approach is to include a series of invisible, zero-height items at the end of your regular items:

<div class="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
</div>

Additionally,

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.parent .item,
.parent .dummyItem{
  width: 50px;
  height: 50px;
  background: white;
  margin: 5px;
}

.parent .dummyItem {
  height: 0;
}

If the longest row in your layout can accommodate n visible items, you will need at least n-1 dummy items for this method to be effective.

The only drawback to this technique is that if there is only one row of items, they may not be perfectly centered but rather aligned mostly to the left.

View Codepen Example.

Answer 5

Answer №3

Unable to achieve desired layout using flexbox right away (I couldn't figure it out myself). One option is to use justify-content: center; but this will center all children resulting in a layout like:

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

The workaround I found is to introduce another parent element and wrap everything inside it.

Check out this CodePen example: http://codepen.io/justd/pen/rOeMGZ

You'll likely discover a solution that works for you by experimenting with various CSS techniques.

Answer 6

Unable to achieve desired layout using flexbox right away (I couldn't figure it out myself). One option is to use justify-content: center; but this will center all children resulting in a layout like:

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

The workaround I found is to introduce another parent element and wrap everything inside it.

Check out this CodePen example: http://codepen.io/justd/pen/rOeMGZ

You'll likely discover a solution that works for you by experimenting with various CSS techniques.

Answer 7

Answer №4

Although I tried using flexbox, I couldn't achieve this specific behavior. However, it can easily be done with CSS Grid. Simply add justify-content: center to the container.

Check out this example on CodePen

Answer 8

Although I tried using flexbox, I couldn't achieve this specific behavior. However, it can easily be done with CSS Grid. Simply add justify-content: center to the container.

Check out this example on CodePen

Answer 9

Answer №5

To achieve the desired layout, set a specific width for the container and then apply margin: 0 auto to the containing element. This will center it horizontally on the page instead of spanning the full width.

For a visual example, you can check out this Codepen link: http://codepen.io/janedoe/pen/RzKlja

Answer 10

To achieve the desired layout, set a specific width for the container and then apply margin: 0 auto to the containing element. This will center it horizontally on the page instead of spanning the full width.

For a visual example, you can check out this Codepen link: http://codepen.io/janedoe/pen/RzKlja

Answer 11

Answer №6

If you're struggling with getting your grid container to work properly, try adding a max-width to it. This will allow the auto margins to function correctly. Currently, your container is expanding 100% to both sides, leaving no room for the auto margin to take effect.

To ensure that your container expands to a maximum of 3 items per row, set the max-width to 660 (item width + item margin):

.container {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-flow: row-wrap;
}
.item {
  width: 200px;
  height: 200px;
  margin: 10px;
}

Check out this Codepen example for reference: http://codepen.io/kgrote/pen/qbpGWZ

With this setup, the container will fluidly expand until reaching its maximum width, then center itself while maintaining a left-aligned grid layout for its children. As the container shrinks, the children will stack accordingly.

Answer 12

If you're struggling with getting your grid container to work properly, try adding a max-width to it. This will allow the auto margins to function correctly. Currently, your container is expanding 100% to both sides, leaving no room for the auto margin to take effect.

To ensure that your container expands to a maximum of 3 items per row, set the max-width to 660 (item width + item margin):

.container {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-flow: row-wrap;
}
.item {
  width: 200px;
  height: 200px;
  margin: 10px;
}

Check out this Codepen example for reference: http://codepen.io/kgrote/pen/qbpGWZ

With this setup, the container will fluidly expand until reaching its maximum width, then center itself while maintaining a left-aligned grid layout for its children. As the container shrinks, the children will stack accordingly.

Answer 13

Answer №7

It's essential to structure your page with default margins on the left and right using percentages instead of pixel widths. This approach ensures that your page will be responsive and display well on all devices without needing Javascript. If you desire, you can also set a maximum width for added control over the layout. By making these adjustments in the CSS code provided below, you should achieve the desired result effortlessly.

.pageLayout {
    margin: 0 auto;
    width: 80%;
    /* add optional max width  */
}

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

<div class="pageLayout">
  <div class="container>
    <div class="item">Flex item 1</div>
    <div class="item">Flex item 2</div>
    <div class="item">Flex item 3</div>
    <div class="item">Flex item 4</div>
    <div class="item">Flex item 5</div>
  </div>
</div>

Answer 14

It's essential to structure your page with default margins on the left and right using percentages instead of pixel widths. This approach ensures that your page will be responsive and display well on all devices without needing Javascript. If you desire, you can also set a maximum width for added control over the layout. By making these adjustments in the CSS code provided below, you should achieve the desired result effortlessly.

.pageLayout {
    margin: 0 auto;
    width: 80%;
    /* add optional max width  */
}

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

<div class="pageLayout">
  <div class="container>
    <div class="item">Flex item 1</div>
    <div class="item">Flex item 2</div>
    <div class="item">Flex item 3</div>
    <div class="item">Flex item 4</div>
    <div class="item">Flex item 5</div>
  </div>
</div>

Combining left-aligned and centered elements within a grid using flexbox

Answer №1

CSS Grid

Javascript Approach

jQuery Implementation

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

The issue arises when trying to implement CSS keyframes with a CSS image slideshow

What is the best way to "leap" a sole transform value within an animation?

Require this form to be centered flawlessly

Arranging my HTML text fields for optimal organization

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

Display scroll bars over the position:absolute header

The function is defined, but it cannot be set to null

The placement of text appears to be incorrect when applying the float:left property in CSS

Hide elements forever once the form is submitted

Achieving nested classes in CSS: a comprehensive guide

What is the best way to rearrange the order of divs when the screen is being resized?

Customizing the appearance of a radio button within a form

Challenge with CSS selectors

The issue arises when trying to use ::v-deep in conjunction with v-dialog's content-class when using scoped scss

List with pulldown options

The jQuery toggleClass() function is not being applied successfully to content that is dynamically generated from

Modify the class of the dropdown and heading 2 elements if they meet specific conditions using Animate.css

Styling a div element in CSS so that it adjusts its size to fit its

What is the best way to create a flexible Ul-LI menu?