Tips for aligning 2 columns perfectly in a 3 column layout

I am facing an issue with a grid section where the grid-template-column is set for 3 columns, but sometimes the content loaded dynamically only fills 2 columns. I am attempting to center the columns when there are only 2.

Despite going through the grid CSS documentation and experimenting with various CSS solutions, I have not been able to achieve the desired outcome.

.wrapper {
    grid-template-columns: repeat(3,1fr);
    display: grid;
    align-items: stretch;
}
.items {
    display: block;
}
cssgridmultiple-columns

Answer №1

Does this meet your expectations? For further information on flexbox, check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

/* Additional styling */
.parent {
 padding: 30px;
 background: lightgrey;
 opacity: 0.8;
}

.child {
 padding: 30px;
 text-align: center;
 background: black;
 margin: 10px;
 color: white;
 max-width: 300px;
}
<div class="parent">
  <div class="child">Column</div>
  <div class="child">Column</div>
</div>
<hr>
<div class="parent">
  <div class="child">Column</div>
  <div class="child">Column</div>
  <div class="child">Column</div>
</div>
<hr>
<div class="parent">
  <div class="child">Column</div>
  <div class="child">Column</div>
  <div class="child">Column</div>
  <div class="child">Column</div>
</div>

Answer №2

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-content: center;
  align-content: center;
}

.grid-container div {
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width">
  <title>My HTML Page</title>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
  <div class="grid-item">F</div>
  <div class="grid-item">G</div>
  <div class="grid-item">H</div>
  <div class="grid-item">I</div>
</div>
</body>
</html>

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

Rails Polymer is experiencing a glitch where the CSS and Polymer elements are not displaying correctly until a page refresh is

Whenever I first load a page, my polymer elements (like paper-input) fail to load their CSS properly. Here is an example of how the page looks before and after refreshing: https://i.sstatic.net/vsIpE.pnghttps://i.sstatic.net/YAFjP.png Below is the code sn ...

cssruby-on-railspolymer

How can I incorporate dynamic moving lines into my website's loading sequence?

Link to Gyazo image 1: https://gyazo.com/015425f0decb187e28b620c1e3206391 Issue with first image: https://gyazo.com/dfcd33e8a4fd5bea64e51fe40556f0bf I'm currently working on a website and came up with a cool concept of having two lines crossing the s ...

htmlcss

How can we use a :before tag element to create a hovering effect on an image that remains clickable?

My objective is to create an image that is wrapped in a link. The link will have a pseudo element :before that adds a black overlay on hover. I want the image to remain clickable, but no matter what I try, the pseudo element won't position correctly o ...

css

unable to decrease the gap between the rows of the table

I'm currently developing an application that involves a table with rows and columns, along with a checkbox container arranged as shown in the image below: https://i.stack.imgur.com/QoVrg.png One issue I'm facing is getting the letters A, B, C, ...

htmlcsshtml-table

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

javascripthtmlcss

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Currently I am developing a single page web application using Vue.js. This app consists of 4 "page.vue" files, each with a right and left child .vue component nested inside. For instance, the Page1.vue file is structured as follows (omitting style and scr ...

javascripthtmlcssvue.js

Implementing CSS styles to Iframe content

I have written the following code snippet to display an iframe: <iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&amp;send=false& ...

phpjavascriptjquerycssfacebook-like

Ways to eliminate the lower boundary of Input text

Currently, I am working on a project using Angular2 with Materialize. I have customized the style for the text input, but I am facing an issue where I can't remove the bottom line when the user selects the input field. You can view the red line in t ...

javascriptcssangularsassstyles

Unfortunately, Rem fails to honor the preferences of users on their smartphones

Trying to incorporate rem units to respect user-defined font-size: Initially, I included the following line in my CSS file: html { font-size: 62.5%; } Subsequently, I applied font-size using rem units to my element. For example: .header{ font-size: 1.5 ...

csssassfont-size

Customize jQuery slideDown animation to have a specific height and handle overflow situations

Below is the HTML snippet I am working with: <div class="text">bla bla bla bla</div> <div class="button">Show</div> Here is the corresponding CSS: .text{ height:100px; overflow:hidden; } Imagine the .text div contain ...

jqueryhtmlcssslidedown

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss

Unable to Achieve Full Height with Vuetify Container

Challenge: I'm facing an issue with my <v-container> component not consistently spanning the entire height of the application. Despite trying various methods such as using the fill-height property, setting height: 100%;, height: 100vh;, and expe ...

javascripthtmlcssvue.jsvuetify.js

Is it considered a bad practice to apply overflow: auto to all elements with the exception of html?

My approach to beginning a new design always involves overriding the default padding and margin set by the browser on all elements: * { margin: 0; padding: 0; } After coming across j08691's response regarding a margin collapse issue, I discovered th ...

htmlcssoverflow

What is the best way to eliminate the gap between spans in Bootstrap?

Imagine you have the following code: <div class="row-fluid"> <div class="span6"></div><!--span6 END--> <div class="span6"></div><!--span6 END--> </div><!--row END--> Now envision two red b ...

csstwitter-bootstraphtml

How to extract a div from its parent using jQuery

I need to stack two div boxes on top of each other, and my goal is to hide the upper one when it's being hovered over. HTML: <div id="left_middle"> <div id="rfinder_UP"></div> <div id="rfinder_DWN"></div> </div> C ...

jquerycss

A trio of versatile sections within a box, one designed to accommodate text overflow

Trying to create a CSS layout where three texts are placed side by side without wrapping, but once the first text is too long, it needs to be truncated. Check out the image below for more details. Methods I have attempted so far: Floated positioning of ...

htmlcss

Modify the background color of each word within the search bar

I've been attempting to colorize each word using jQuery and give them a colored background. I came across a solution, but it only seems to work for the HTML content, not the input field in the search bar. Below is an example of what I found: HTML So ...

jqueryhtmlcsssearchhighlight

Height of VUE Carousel 3D Slider dimension

I recently integrated the VUE Carousel 3D Slider on my website, but I'm facing an issue with controlling the height of the slides. There seems to be excessive space below the slider because the slides are unnecessarily tall. I attempted to adjust the ...

javascriptcssvue.jsheight

Ways to align a bootstrap 4 row both vertically and horizontally in the center amidst other rows

Assume there is a main menu followed by three rows. The first row should be at the top and the third at the bottom, while the second row needs to be centered both vertically and horizontally. As you scroll down, the main menu should be able to hide while ...

htmlcssbootstrap-4

Pure CSS tab system that prevents label propagation using anchors

I am in the process of creating a tab system using only CSS with the help of the :target and :checked pseudo classes. However, I have encountered an issue where an anchor inside the label is not triggering the :checked. When clicking on the anchor, the :c ...

htmlcsscss-selectors