How can I move these elements up? in CSS

Question

I want to move element to up like in photo in attachment. which code I should write to my css ?

*{box-sizing: border-box;}
body{
    height: 100vh;
    width: 100vw;
    font-family: sans-serif;
}
h2{padding: 5px;}
p{padding: 5px;}
.container{
    display: flex;
    width: 1200px;
    margin: 50px auto;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    background-color: aquamarine;
}
.container__item{
    width: 350px;
    /* height: 100%; */
    background-color: #fff;
}
[class*="image"]{
    width: 350px;
    background-color: rgb(200, 200, 200);
    color: gray;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
[class$="150"]{height: 150px;}
[class$="100"]{height: 100px;}
[class$="350"]{height: 350px;}
[class$="220"]{height: 220px;}
[class$="230"]{height: 230px;}

<div class="container">
        <div class="container__item">
            <div class="container__item-image 350x150">350x150</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x100">350x100</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x100">350x100</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x220">350x220</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x230">350x230</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x350">350x350</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x100">350x100</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x150">350x150</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x150">350x150</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
    </div>

I already tried justify-content: flex-start; and align-items: flex-start; but they didn't help for this example. Maybe I have another problem ? I can't solve it. I try to solve it about two days :D I can't find answer for this. Please somebody help to solve this exercise.

You need to use grid layout learn more about in these links : --- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout -----https://css-tricks.com/snippets/css/complete-guide-grid/ — Masudur Rahman Sourav, Jun 20 '22 at 06:24

score -1 · Answer 1 · answered Jun 20 '22 at 06:32

Check this. You can use display:grid to check it out.

*{box-sizing: border-box;}
body{
    height: 100vh;
    width: 100vw;
    font-family: sans-serif;
}
h2{padding: 5px;}
p{padding: 5px;}
.container{
    width: 1200px;
    margin: 50px auto;
    column-count: 4;
    column-gap: 5px;
}
.container__item{
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 0px;
    break-inside: avoid;
}
[class*="image"]{
    width: 100%;
    background-color: rgb(200, 200, 200);
    color: gray;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
[class$="150"]{height: 150px;}
[class$="100"]{height: 100px;}
[class$="350"]{height: 350px;}
[class$="220"]{height: 220px;}
[class$="230"]{height: 230px;}

<div class="container">
        <div class="container__item">
            <div class="container__item-image 350x150">350x150</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x100">350x100</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x100">350x100</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x220">350x220</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x230">350x230</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x350">350x350</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x100">350x100</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x150">350x150</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
        <div class="container__item">
            <div class="container__item-image 350x150">350x150</div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
        </div>
    </div>

How can I move these elements up? in CSS

1 Answers1