can't figure out how align 3 pictures side by side - html

The photos should look like this:
This is a uni assignment and it’s like my first experience with coding so please try to understand. And I'm pretty sure there are a lot of mistakes so please help me out if you can.
This is my code so far:
.wrapper-home-photo {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
background-color: #1d1d1e;
padding: 100px;
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home1.jpg" width="540" height="330" />
</figure>
</div>
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home2.png" width="400" height="220" />
</figure>
</div>
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home3.jpg" width="540" height="330" />
</figure>
</div>


this may help you
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home1.jpg" width="540" height="330" />
</figure>
<figure>
<img src="./src/imgs/home-photos/strangerthings-home2.png" width="400" height="220" />
</figure>
<figure>
<img src="./src/imgs/home-photos/strangerthings-home3.jpg" width="540" height="330" />
</figure>
</div>


Put all the images into one centralized div with the class block. From here, you can use display: grid to align all the contents of the div into a grid. Then just do grid-template-columns: 1fr 1fr 1fr; to create 3 columns, each 1fr being 1 fraction of the div, and since you have three images you will need 3 columns. You can use grid-gap: 20px to add some margins and separation between each image.
.banner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
grid-column-gap: 20px;
}
.banner img {
width: 100%;
}
<div class="banner">
<img src="https://www.muralswallpaper.com/app/uploads/Green-Tropical-Plant-Wallpaper-Mural-Plain.jpg">
<img src="https://www.muralswallpaper.com/app/uploads/Green-Tropical-Plant-Wallpaper-Mural-Plain.jpg">
<img src="https://www.muralswallpaper.com/app/uploads/Green-Tropical-Plant-Wallpaper-Mural-Plain.jpg">
</div>

Related

How to put an image in React header

How should you put an image on the left of the heading name?
return (
<div className="header">
<img src={"/images/logo.png"} width="10" height="5" />
<p className="name">heading name</p>
<div className="header-right">

In your header class, which is basically a container for the img, p and div, add a grid.
.header {
display: grid;
grid-template-columns: 50px 1fr 50px; // This will create 2 columns of 50 pixels, and the middle column will fill the remaining space grid-template-rows: 1fr; // just one row
height: 100%;
width: 100%;
}
return (
<div className="header">
<img src={"/images/logo.png"} width="10" height="5" />
<p className="name">heading name</p>
<div className="header-right">

Flexbox Directions and multiple images within

I am attempting to use flex-box within this build; I have attached both the HTML and CSS code portions. I have attempted to get the DIV container to hold 9 images that should flex-wrap: wrap into 3 rows of 3 images. I am sure I am missing something small; but the best I can do is get one long continuous row of all 9 images.
I have tried to watch some videos and make different changes within HTML and CSS with no success; could anyone please point me in the right direction, or point out my mistake please?
Code:
.gallery {
width: 100%;
height: 100vh;
text-align: center;
background-color: rgb(0, 4, 17);
flex-direction: row;
}
.food-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.foodimg {
display: flex;
}
<section class="gallery">
<div>
<h2>OUR FOOD</h2>
<div class="food-container">
<div class="foodimg">
<img src="img/food-avocadotoast.jpg" alt="" />
</div>
<div class="foodimg">
<img src="img/food-burger.jpg" alt="" />
</div>
<div class="foodimg">
<img src="img/food-poutine.jpg" alt="" />
</div>
<div class="foodimg">
<img src="img/food-ribs.jpg" alt="" />
</div>
<div class="foodimg">
<img src="img/food-sandwich.jpg" alt="" />
</div>
<div class="foodimg">
<img src="img/food-sausage.jpg" alt="" />
</div>
<div class="foodimg">
<img src="img/food-steak.jpg" alt="" />
</div>
<div class="foodimg">
<img src="img/food-tacos.jpg" alt="" />
</div>
<div class="foodimg">
<img src="img/food-wings.jpg" alt="" />
</div>
</div>
</div>
</section>

Here, It's best to use grids
.food-container{
display: grid;
grid-template-columns: auto auto auto; /*that should do it*/
}

How to add 2 rows and 3 columns images?

My idea of this project is to put 2 rows and 3 columns to put images inside them. I'm using Laravel html Css(without Bootstrap).
What I want looks like this:
Any idea how to start it?

Wrap the images and apply display: grid; to the container.
To have 3 columns, use: grid-template-columns: repeat(3, 1fr);
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid img {
width: 100%;
}
<div class="grid">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
</div>

Fastest and simplest way to achieve rows and columns is display: flex.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could also use grid but grid is more complex and not used as often because it is harder to handle than flex. Flexbox is responsive, adjusts content to screen size so you can expand screen size to see how it works.
Code is very simple. CSS:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
img {
margin: 5px;
}
<div class="container">
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
</div>
https://jsfiddle.net/rpvjo26y/12/

in terms of html structure this is what you need:
<table>
<tr>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
</tr>
<tr>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
<td><img src="https://via.placeholder.com/400x300jpg" /></td>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
</tr>
</table>

css properties are not upto mark

I want to separate two rows containing multiple images in each rows. I found the solution for separating them in column wise but not able to do the same in rows so please help me.
The properties I used for this process are
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
grid-template-rows: repeat(auto-fit, minmax(270px,1fr));

Did You try with gap:
.container {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
grid-template-rows: repeat(auto-fit, minmax(270px,1fr));
gap: 2em;
}
<div class="container">
<img src="https://picsum.photos/300/270" />
<img src="https://picsum.photos/300/270" />
<img src="https://picsum.photos/300/270" />
<img src="https://picsum.photos/300/270" />
<img src="https://picsum.photos/300/270" />
<img src="https://picsum.photos/300/270" />
<img src="https://picsum.photos/300/270" />
</div>

grid-template-columns not working as expected. Getting blank spaces in some rows

When I do grid-template-columns: repeat(2, 1fr); I get two images in the first row then the following row I get 1 image repeated in a frame with an empty space on the right on the same frame where I'm supposed to have the second image. How do I fix that to get 2 images in each frame when #media(max-width:990px) is true? It's all working fine except for the above explained problem.
img {
width: 100%;
}
.card {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
background: #101010;
margin-bottom: 1rem;
}
.card img {
height: auto;
}
#media(max-width:600px) {
.card {
display: flex;
}
}
#media(max-width:990px) {
.card {
grid-template-columns: repeat(2, 1fr);
}
}
<main class="container">
<section class="card">
<img src="images/pic01.jpg" alt="" />
<img src="images/pic02.jpg" alt="" />
<img src="images/pic03.jpg" alt="" />
</section>
<section class="card">
<img src="images/pic04.jpg" alt="" />
<img src="images/pic05.jpg" alt="" />
<img src="images/06.jpg" alt="" />
</section>
<section class="card">
<img src="images/pic07.jpg" alt="" />
<img src="images/pic08.jpg" alt="" />
<img src="images/pic09.jpg" alt="" />
</section>
</main>

Looks like the problem is duplicated <section> tags in your HTML. Try this instead. Rate and accept the answer if you find it helpful!
<main class="container">
<section class="card">
<img src="https://picsum.photos/200/300" alt="" />
<img src="https://picsum.photos/200/300" alt="" />
<img src="https://picsum.photos/200/300" alt="" />
<img src="https://picsum.photos/200/300" alt="" />
<img src="https://picsum.photos/200/300" alt="" />
<img src="https://picsum.photos/200/300" alt="" />
<img src="https://picsum.photos/200/300" alt="" />
<img src="https://picsum.photos/200/300" alt="" />
</section>
</main>