Fitting multiple div inside another div vertically or horizontally based on div number-CodePudding

I want to fit multiple number of div inside another div in an order that there will be maximum two div in a line and another div will go to next line and will be vertically centered. If there are four/six/even number of div, then there will be two div in each line. If there are odd number of div, there will be two div in each line and a vertically centered lone div in last line. Can it be done without using JS? Number of div will vary as it may change dynamically/runtime.

div
[
div  div
div  div
]

div
[
div     div
div     div
    div
]

My current code:

<div id="container">
        <div id="smallerCon">
            <div id="smallerLeftBoxText">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            </div>
        </div>
        <div style="width: 1vw;"></div>
        <div id="smallerCon">
            <div id="smallerLeftBoxText">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            </div>
        </div>
    </div>
    <div id="container">
        <div id="smallerCon">
            <div id="smallerLeftBoxText">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            </div>
        </div>
        <div style="width: 1vw;"></div>
        <div id="smallerCon">
            <div id="smallerLeftBoxText">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            </div>
        </div>
    </div>

<style>
#container{
    width: 90vw;
    display: flex;
    flex-direction: row;
    margin: auto;
}
#smallerCon{
    height: 20vh;
    width: 44.5vw;
    margin: auto;
    background-image:linear-gradient(to bottom right, rgba(255, 0, 128, 0.577), rgba(0, 204, 255, 0.49)),url("../img/26March.gif");
    display: flex;
    flex-direction: row;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid rebeccapurple;
    margin-bottom: 2vh;
}
#smallerLeftBoxText{
    width: 40vw;
    margin: auto;
    font-weight: 400;
    color: rgb(245, 223, 223);
}

I want the same output but the code will be like:

<div id=container>
  <div id=smallerCon>...</div>
  <div id=smallerCon>...</div>
  <div id=smallerCon>...</div>
  <div id=smallerCon>...</div>
</div>

CodePudding user response：

First off: in CSS an ID must be unique to a single element. Change id=smallerCon into class=smallerCon and use .smallerCon in your CSS.

Solution:

You need to limit the Flexbox (FBL) container child elements to occupy 50% of their FBL parent container by using either CSS property flex-basis or flex (shorthand for flex-grow, flex-shrink and flex-basis)
enable the FBL parent to wrap its child elements when they exceed their designated width using flex-flow: row wrap (shorthand for flex-direction, flex-wrap)
Optionally horizontally center the FBL child elements in their parent with justify-content
Optionally assign a minimum width to the FBL child elements to have them all wrap on smaller screens

Snippet:

/* include border width in total element width */
* { box-sizing: border-box }

#container {
    width: 90vw; margin: auto;

    /* Flexbox */
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1rem;
    /**/
}

.smallerCon {
    height: 20vh;
    min-width: 18rem; /* [OPTIONAL] set a min for small screens */

    /* Flexbox */
    flex: 0 1 calc(50% - 0.5rem); /* as FBL child */

    display: flex; /* as FBL parent */
    flex-flow: row wrap;

    /* eye-candy */
    background-image: linear-gradient(
            to bottom right,
            rgba(255, 0, 128, 0.577),
            rgba(0, 204, 255, 0.49)
        ),
        url("../img/26March.gif");

    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    border: 2px solid rebeccapurple;
}

<div id=container>
  <div class=smallerCon>...</div>
  <div class=smallerCon>...</div>
  <div class=smallerCon>...</div>
  <div class=smallerCon>...</div>
  <div class=smallerCon>...</div>
</div>

CodePudding user response：

flex can be used for this, minimal sample below:

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.container > .card {
    width: 50%;
}

.card > div {
    background: #ccc;
    margin: 1rem;
    padding: 1rem;
}

<div >
    <div ><div>1</div></div>
    <div ><div>2</div></div>
    <div ><div>3</div></div>
    <div ><div>4</div></div>
</div>

<div >
    <div ><div>1</div></div>
    <div ><div>2</div></div>
    <div ><div>3</div></div>
    <div ><div>4</div></div>
    <div ><div>5</div></div>
</div>

CodePudding user response：

It will be good to see the code you have already so we can assist. Also, to answer your question, YES it can be done. just CSS and HTML is enough to make it happen.

CodePudding user response：

it can be done easily with css GRID https://css-tricks.com/snippets/css/complete-guide-grid/