A grid of N columns by 2 rows where the last row will be centered if it contains only one column

Question

A grid of N columns by 2 rows where the last row will be centered if it contains only one column

My goal is to create a dynamic N-by-2 grid that adjusts its display based on run-time factors, resulting in an unknown number of rows and columns at design time. The grid could have different configurations like:

1 2
3 4
 5

or

1 2
4 5 (missing 3)

or

1 3 (missing 2, 5)
 4  (last column)

The challenge is to ensure that the last element is always centered within the grid. Each div is set as .col-xs-6 to establish the grid as N-by-2.

How can I guarantee that the last column will be centered without knowing which one it is beforehand during the design phase? Since the position of the last column is uncertain, using offsets for specific columns is not feasible. Any suggestions are welcome!

Check out this link for reference.

If CSS or Bootstrap alone cannot accomplish this, please advise me accordingly.

css twitter-bootstrap-3 centering grid-layout

Answer 1

Answer №1

To target the odd last element in your scenario, you can make use of the last-child property. This way, you ensure that only the odd last elements are centered, while the even last elements remain unaffected. Here is how you can implement it:

.col-xs-6
{
  display:inline-block;
  text-align:center;
}
.col-xs-6:nth-last-child(1):nth-child(odd) { /* Selects the last child with an odd element */
  display:inline-block;
  text-align:center;
  width:100%;
}

Check out the DEMO

Answer 2

To target the odd last element in your scenario, you can make use of the last-child property. This way, you ensure that only the odd last elements are centered, while the even last elements remain unaffected. Here is how you can implement it:

.col-xs-6
{
  display:inline-block;
  text-align:center;
}
.col-xs-6:nth-last-child(1):nth-child(odd) { /* Selects the last child with an odd element */
  display:inline-block;
  text-align:center;
  width:100%;
}

Check out the DEMO

Answer 3

Answer №2

JSfiddle Demo - Example 1

Keep in mind that this method does not involve using floats and instead utilizes display:inline-block.

CSS Styling

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
    text-align: center;
    font-size:0;
}

.col-xs-6 {
    float:none;
    font-size:1rem;
    display: inline-block;
    width:50%;
    border:1px solid grey;
}

JSfiddle - Example 2

This approach involves traditional floats with a clearing mechanism for the last item.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
}

.col-xs-6 {

    border:1px solid grey;
}

.col-xs-6:nth-last-child(1):nth-child(odd) {
    clear:both;
    float:none;
    margin:0 auto;
}

NOTE: Please refer to Suresh's comment regarding the necessity of ensuring the last child is odd. Acknowledged.

Answer 4

JSfiddle Demo - Example 1

Keep in mind that this method does not involve using floats and instead utilizes display:inline-block.

CSS Styling

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
    text-align: center;
    font-size:0;
}

.col-xs-6 {
    float:none;
    font-size:1rem;
    display: inline-block;
    width:50%;
    border:1px solid grey;
}

JSfiddle - Example 2

This approach involves traditional floats with a clearing mechanism for the last item.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
}

.col-xs-6 {

    border:1px solid grey;
}

.col-xs-6:nth-last-child(1):nth-child(odd) {
    clear:both;
    float:none;
    margin:0 auto;
}

NOTE: Please refer to Suresh's comment regarding the necessity of ensuring the last child is odd. Acknowledged.

Answer 5

Answer №3

Utilizing Bootstrap 5 framework:

<div class="row row-cols-2 justify-content-center">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

Answer 6

Utilizing Bootstrap 5 framework:

<div class="row row-cols-2 justify-content-center">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

A grid of N columns by 2 rows where the last row will be centered if it contains only one column

Answer №1

Answer №2

Answer №3

Similar questions

Tips for seamlessly integrating an overlay into a different image

How can I personalize the preview feature in a Bootstrap rich text editor?

Wide container using Bootstrap

Responsive HTML grid with a distinct line separating each row

Is it possible to rearrange the sequence of HTML DIV's exclusively through CSS?

Spacing between posts using CSS and jQuery

HTML/CSS: What could be causing the iframe to not scroll properly?

Closing the Bootstrap Dropdown Menu

Is it possible to align Bootstrap buttons and input fields in a single row, and have the input field stretch to

A fading transparency box on the border

I am struggling to make the horizontal scroll and fixed column features work in dataTables. The rendering seems to be inconsistent across different platforms. Can anyone help me figure out what I am doing incorrectly?

It appears that JavaScript has the capability to automatically remove event listeners from textareas

Achieve stacking one div on top of another without specifying a position and utilizing inline CSS only

Changing the display order of divs in Angular 2 when they are shown or hidden

Live Server in VS Code not refreshing automatically as expected

Mastering the art of positioning images using CSS and HTML in email marketing

What are the methods for creating a diagonal line using GWT or the combination of HTML, CSS, and JavaScript?

Opting for css3 translate over using position: left for positioning elements

On a desktop view, the content is displayed in 4 columns, while on smaller

Error: Uncaught TypeError - The function indexOf is not defined for e.target.className at the mouseup event in HTMLDocument (translator.js:433) within the angular