Align content at the center of the grid

https://i.sstatic.net/0Y760.png

I am looking to center the content of a grid, similar to the example shown above. The Boxes in this grid are dynamic, meaning there can be multiple Box elements in each row and multiple rows overall. The Nav section is always present.

My goal is to have both the Boxes and Nav centered within the grid.

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

In the image provided above, the issue arises when the screen size decreases. I need the Boxes to wrap onto new lines as shown in the example, but maintaining proper spacing between the Boxes and the Nav proves challenging without being able to set a fixed width due to the dynamic nature of the Boxes.

For reference, here is a link to the corresponding CodeSandbox.

Update

https://i.sstatic.net/AGI1B.png The desired end result should resemble the image linked here.

The sidebar will always remain on the right side, but the number of boxes on the left may vary per row, as well as the total number of rows with boxes.

csscss-grid

Answer №1

Comprehend the following information.

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture {
  max-width: 100%;
  display:block;
}


body{
  min-height: 100vh;
  background-color: bisque;
  overflow: hidden;
  
}

.container{
  width: 100%;
  margin: 0 auto;
  display: grid;
  place-content: center;
  grid-template-columns: 1fr auto 1fr 1fr ;
  grid-template-rows: 1fr 1fr 1fr;
  gap:2rem;
}

.first-row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.second-row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box{
  min-width: 5rem;
  width:100px;
  max-width: 100px;
  height: 100px;
  background-color: greenyellow;
  border: 1px solid black;
  display: flex;
  flex-basis: 5rem;
  flex-grow: 1;
}

.nav{
  width: 100px;
  height: 300px;
  background-color: aquamarine;
  border: 1px solid black;
}
<div class="container">
      <div class="boxes">
        <div class="first-row">
          <div class="box"></div>
          <div class="box"></div>
        </div>
        <div class="second-row">
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>
      </div>
      <div class="nav"></div>
</div>

Additionally, review the content below

flex-box: shrink before wrap

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

How do I use jQuery to remove a dynamically added class from the page's header?

When using an inline editor to modify css classes, I encounter the need to remove and then re-add a class definition after making changes. Additionally, users have the option to delete elements, so it's important that the definition is also deleted. ...

javascriptjquerycsshtml

The functionality of item.classList.toggle() in HTML+CSS+JS fails to execute

I have been working on a program that aims to flip a card when it is clicked. The JavaScript code I have written for this functionality is as follows: /* Card flipping onclick */ import "./Stylesheets/FlipCardStyle.css" var cards = document.quer ...

javascripthtmlcssfrontendcard

Using CSS to Position a Circle at the Top of a Border

Breaking down the complex issue into a simple statement, I am dealing with a blue circle inside a box with a red border. How can I ensure that the circle remains centered while overlapping the top horizontal line of the box's border? I tried differe ...

javascriptjqueryhtmlcss

Button click triggers CSS animation

Check out the interactive demo $(document).ready(function(){ $('#btn-animate').click(function(){ animate(); }); $('#btn-remove').click(function(){ $('.to-animate').removeClass('animate'); }); func ...

javascriptjqueryhtmlcssanimation

Complex UL structure with nested LI items and both column and inline styling

I'm facing a challenge that seems insurmountable - I can't even begin to tackle it, so I don't have a polished solution to present. All I have is the source code and my goal. My task is to create a three-level UL structure. The top level sh ...

htmlcss

As the cursor moves, the image follows along and rotates in sync with its

Can anyone help me figure out how to create a moving image that follows the mouse cursor? I have a radial pie menu with an image in the middle, and I want it to spin and rotate as the mouse moves. Any ideas on how I can achieve this effect? I would greatl ...

javascripthtmljquerycss

What are the steps to implementing a grid image system in Bootstrap4?

How can I use Bootstrap4 and CSS3 to position picture 4 and 5 under picture 2 and 3 within a grid layout? <main> <div class="container-fluid"> <div class="row"> <h1 class="col-12">Anonymous& ...

cssbootstrap-4grid

Template designed in the style of Spotify with HTML5 and responsive features

I am in the process of creating a one-page website with a similar effect to that on spotify.com. Essentially, I want the background image to change as you scroll down, while still keeping elements displayed over the previous backgrounds in a smooth and res ...

csshtmlthemesresponsive-design

Looking to display several charts on a single page with varying datasets?

I have successfully integrated a doughnut chart plugin into my website. However, I would like to display multiple charts on the same page with different data sets. Below is the code snippet for the current chart being used: This is the chart I am using & ...

javascripthtmlcsschartschart.js

What is the reason for the click event in a Chrome extension's popup to refresh the popup's

While exploring Chrome extensions, I came across a strange issue with the popup window. Inside popup.html, there is an element <a id="grantexpert">...</a> and in popup.js, I want to change the background color of this element when clicked. Ini ...

jquerycsseventsgoogle-chrome-extensionpopup

Responsive design element order rearrangement

My code example is as follows: <div class="info-container"> <span class="item1">item1</span> <a class="item2" href="#">item2</a> <a class="item3" href="#">item3</a> </div> I want to rearran ...

javascriptjqueryhtmlcssangularjs

Having trouble with Simplemodal showing link content in the modal window

Having trouble getting the modal window to display content from another link? I'm pretty sure I've connected them correctly using the right classes. This is the basic JavaScript provided by . jQuery(function ($) { // Load dialog on page load //$ ...

javascriptjqueryhtmlcsssimplemodal

Exploring the Differences in CSS Styling between Web and Mobile Platforms

Recently, I launched my new website and encountered a peculiar issue. Upon clicking on Pickup Date & Time, a bootstrap datepicker pops up like it should. However, the problem arises when viewing the website on mobile devices - the datepicker appears offsc ...

javascriptjquerycsstwitter-bootstrapbootstrap-datepicker

It's impossible to center text in Bootstrap 5

Creating a website for my school project has been challenging, especially when it comes to centering text. I have been struggling to position the text in the middle of the background picture despite trying various methods. Here is the HTML code: pastebin ...

htmlcssbootstrap-5

The combination of absolute positioning and percentage-based height measurements allows for

For more information, go to http://jsfiddle.net/A2Qnx/1/ <div id='w'> <div id='p'> <div id='c'> </div> </div> </div> With absolute positioning enabled, div P has a height ...

htmlcssheightcss-position

Display a specific tab section upon clicking using jQuery or JavaScript

Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items ...

javascriptjquerycsshtml

Updating the innerHTML of a frameset

I have a unique challenge that involves loading the frameset of www.example.com/2.html when accessing www.example.com/en/test/page.html. Successfully accomplished this task. Now, after loading 2.html in the frameset, I want to modify ".html" to ".html" t ...

javascriptjqueryhtmlcss

Create and adapt dynamic tiles to fit within the available width

I am looking to create a dynamic tile (div) that adjusts based on the number of users available, similar to how it works in Microsoft Teams meetings. For example, if there is only one user, the div should occupy the full screen. When there are two users ...

javascriptcssbootstrap-4flexboxresponsive-design

Text overlay effect on hovering an image

I am struggling to add text to a photo and make the entire photo clickable with a link. I have already applied a darkening effect that I want to keep, but now I need to insert text on top of it. It is important for me to maintain the current dimensions and ...

htmlcsshover

Limiting the height of a Bootstrap 4 column to match another column's height: A simple guide

I currently have a layout with two columns in a row. The left column has a fixed height determined by its content (height:auto), while the right column is longer and may overflow once it reaches the height of the left column. How can I make sure the right ...

htmlcssbootstrap-4angular-ui-bootstrap