Grid Alignment Centered - Inner Grid aligned to the left - Zero Javascript or Media Queries Allowed

Question

Grid Alignment Centered - Inner Grid aligned to the left - Zero Javascript or Media Queries Allowed

[UPDATE]

Looking for a solution that doesn't involve javascript or media queries as the user should be able to change the container size.

[/UPDATE]

In need of creating a grid layout for items.

The container's width is flexible.
The grid must always be centered.
Items within the grid should be aligned to the left.

Seems like a simple task, but I'm struggling to find a solution!

Here's an example image illustrating what I'm aiming for:

Also, you can check out a jsfiddle here: http://jsfiddle.net/5e4bcc9L/1/

HTML :

<div class="container">
    <div class="grid"> 
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
         <a href="#"></a>
    </div>
</div>

CSS :

.container {
    width: 100%;
    background-color:#CCC;
    text-align: center;
}
.grid {
    background-color:#999;
    display: inline-block;
    text-align: left;
}
a {
    display:inline-block;
    height: 100px;
    width: 100px;
    background-color:#000;
    margin: 5px;
}

html css grid-layout

Answer 1

Answer №1

Without relying on JavaScript or media queries, achieving your desired layout can be tricky. The challenge stems from setting fixed heights and widths for the blocks within the grid. Here's a more detailed explanation:

Centered grid with left alignment

CSS (with HTML unchanged)

.container{
    width: 100%; 
    height:100%;
    background-color:#CCC;
    text-align:center;
}

.grid{
    background-color:#999; 
    display: inline-block;
    position:relative;
    width: 80%;
    border:1px solid black;
}

.grid a{
    display:inline-block; 
    height: 100px; 
    width: 100px; 
    background-color:#000;
    margin: 5px;
    float:left;
}

.ghost{clear: both;}

In the fiddle provided, you'll notice that it works as you intended...until you resize the window. This is because the grid blocks cannot properly align themselves until there is enough space for them to float, resulting in blocks that may not appear at the sizes you desire.

If you are willing to forego the left alignment requirement, you could achieve a more satisfying centered content layout, as demonstrated here. Simply comment out the float property in the CSS above to see the difference.

Alternatively, following the suggestion provided by web-tiki in the link above might be the best solution.

Answer 2

Without relying on JavaScript or media queries, achieving your desired layout can be tricky. The challenge stems from setting fixed heights and widths for the blocks within the grid. Here's a more detailed explanation:

Centered grid with left alignment

CSS (with HTML unchanged)

.container{
    width: 100%; 
    height:100%;
    background-color:#CCC;
    text-align:center;
}

.grid{
    background-color:#999; 
    display: inline-block;
    position:relative;
    width: 80%;
    border:1px solid black;
}

.grid a{
    display:inline-block; 
    height: 100px; 
    width: 100px; 
    background-color:#000;
    margin: 5px;
    float:left;
}

.ghost{clear: both;}

In the fiddle provided, you'll notice that it works as you intended...until you resize the window. This is because the grid blocks cannot properly align themselves until there is enough space for them to float, resulting in blocks that may not appear at the sizes you desire.

If you are willing to forego the left alignment requirement, you could achieve a more satisfying centered content layout, as demonstrated here. Simply comment out the float property in the CSS above to see the difference.

Alternatively, following the suggestion provided by web-tiki in the link above might be the best solution.

Grid Alignment Centered - Inner Grid aligned to the left - Zero Javascript or Media Queries Allowed

Answer №1

Similar questions

Unable to get HTML text input validation with RegEx to function, despite incorporating the required attribute

Modify the CSS of the hidden value within a select type input field

What is the best way to use JavaScript to insert HTML values and then display the final output?

Receive the latest order details following jQuery Sort

How to style tables in CSS with specific border spacing inside cells

Learn how to dynamically insert input data into a table based on a specific ID in React JS!

Tips for positioning a div relative to another div while controlling its z-index

CSS navigation drop down menu styling

Return to the previous URL after executing window.open in the callback

Header components struggling with proper alignment in CSS

Is there a way to dynamically reorganize elements within a grid layout using Java programming language?

Scrollspy in bootstrap incorrectly highlights the navigation item as active

The Bootstrap button is having trouble rendering correctly

Tips for distinguishing individual rows within a table that includes rowspans?

Is there a way to prevent the Sticky Footer from obscuring the content?

Make sure to load the gif image before any other images are loaded from the css

Can two div elements be positioned next to each other without relying on CSS float?

Adding HTML saved as a blob directly to the source of a .aspx page

Run javascript code after the page has transitioned

The document.write function in JavaScript is malfunctioning