HTML CSS Pt 2, Layout, Exercise 2 Photo gallery:

HTML/CSS
1 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="/css/styles.css">

    <title>Document</title>

</head>

<body>

    <div class="container">

        <div class="box">

            <div class="dream">

                <figure class="gallery__item gallery__item--1">

                    <img src="/images/1.jpg" alt="Gallery image 1" class="gallery__img">

                    <figure class="gallery__item gallery__item--2">

                        <img src="/images/2.jpg" alt="Gallery image 2" class="gallery__img">

                    </figure>

                    <figure class="gallery__item gallery__item--3">

                        <img src="/images/3.jpg" alt="Gallery image 3" class="gallery__img">

                    </figure>

                    <figure class="gallery__item gallery__item--4">

                        <img src="/images/4.jpg" alt="Gallery image 4" class="gallery__img">

                    </figure>

                    <figure class="gallery__item gallery__item--5">

                        <img src="/images/5.jpg" alt="Gallery image 5" class="gallery__img">

                    </figure>

            </div>

            <div class="dream">

                <figure class="gallery__item gallery__item--6">

                    <img src="images/6.jpg" alt="Gallery image 6" class="gallery__img">

                </figure>

                <figure class="gallery__item gallery__item--7">

                    <img src="images/7.jpg" alt="Gallery image 7" class="gallery__img">

                </figure>

                <figure class="gallery__item gallery__item--8">

                    <img src="images/8.jpg" alt="Gallery image 8" class="gallery__img">

                </figure>

                <figure class="gallery__item gallery__item--9">

                    <img src="images/9.jpg" alt="Gallery image 9" class="gallery__img">

                </figure>

            </div>

</body>

</html>

*,

*::after,

*::before {

margin: 0;

padding: 0;

box-sizing: inherit;

}

.container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

object-fit: cover;

padding-top: 10px;

}

.container .box {

display: flex;

flex-direction: row;

justify-content: space-evenly;

}

.container .box .dream {

display: flex;

flex-direction: column;

width: 34%;

}

.container .box .dream img {

width: 100%;

padding-bottom: 5px;

}

@media only screen and (max-width: 769px) {

.container .box {

    flex-direction: column;

}

.container .box .dream {

    width: 25%;

}

}

@media only screen and (min-width: 1024px) {

.container {

    display: grid;

    width: 70%;

    margin: 2rem auto;

}

.container .box {

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    grid-template-rows: repeat(8, 5vw);

    grid-gap: 1rem;

}

.gallery__img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.gallery__item--1 {

    grid-column-start: 1;

    grid-column-end: 2;

    grid-row-start: 1;

    grid-row-end: 3;

    /** Alternative Syntax **/

    /* grid-column: 1 / span 2;  */

    /* grid-row: 1 / span 2; */

}

.gallery__item--2 {

    grid-column-start: 1;

    grid-column-end: 3;

    grid-row-start: 3;

    grid-row-end: 5;

    /** Alternative Syntax **/

    /* grid-column: 3 / span 2;  */

    /* grid-row: 1 / span 2; */

}

.gallery__item--3 {

    grid-column-start: 1;

    grid-column-end: 3;

    grid-row-start: 5;

    grid-row-end: 7;

    /** Alternative Syntax **/

    /* grid-column: 5 / span 4;

  grid-row: 1 / span 5; */

}

.gallery__item--4 {

    grid-column-start: 1;

    grid-column-end: 3;

    grid-row-start: 7;

    grid-row-end: 9;

    /** Alternative Syntax **/

    /* grid-column: 1 / span 4;  */

    /* grid-row: 3 / span 3; */

}

.gallery__item--5 {

    grid-column-start: 3;

    grid-column-end: 7;

    grid-row-start: 1;

    grid-row-end: 5;

    /** Alternative Syntax **/

    /* grid-column: 1 / span 4; */

    /* grid-row: 6 / span 3; */

}

.gallery__item--6 {

    grid-column-start: 3;

    grid-column-end: 5;

    grid-row-start: 7;

    grid-row-end: 9;

    /** Alternative Syntax **/

    /* grid-column: 5 / span 4; */

    /* grid-row: 6 / span 3; */

}

.gallery__item--7 {

    grid-column-start: 3;

    grid-column-end: 5;

    grid-row-start: 5;

    grid-row-end: 7;

}

.gallery__item--8 {

    grid-column-start: 5;

    grid-column-end: 7;

    grid-row-start: 5;

    grid-row-end: 7;

}

.gallery__item--9 {

    grid-column-start: 5;

    grid-column-end: 7;

    grid-row-start: 7;

    grid-row-end: 9;

}

}

Screenshot 2021-05-15 210639
Screenshot 2021-05-15 2106391545×593 48.1 KB

I am unable to make the 3rd layout with grid for 1024px screens, I’ve been trying to solve this for more than 6 hours, can someone please help me with this, or send me the full source code of mosh. Thank you.

1 Like
2

Here is my code bro

HTML

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Responsive</title>

<link rel="stylesheet" href="styles.css" />

<div class="container">

  <div class="box box1"><img src="images/img1.jfif" alt="1" /></div>

  <div class="box box2"><img src="images/img2.jfif" alt="2" /></div>

  <div class="box box3"><img src="images/img3.jfif" alt="3" /></div>

  <div class="box box4"><img src="images/img4.jfif" alt="4" /></div>

  <div class="box box5"><img src="images/img5.jfif" alt="5" /></div>

  <div class="box box6"><img src="images/img6.jfif" alt="6" /></div>

  <div class="box box7"><img src="images/img7.jfif" alt="7" /></div>

  <div class="box box8"><img src="images/img8.jfif" alt="8" /></div>

  <div class="box box9"><img src="images/img9.jfif" alt="9" /></div>

</div>

CSS ( Styling )

*,

*::before,

*::after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

.container {

padding: 10px 10px;

display: grid;

height: auto;

grid-template-columns: repeat(3, 1fr);

grid-template-rows: repeat(4, 1fr);

grid-gap: 10px;

}

img {

width: 100%;

height: 100%;

object-fit: cover;

border-radius: 5px;

}

.box2 {

grid-row: 1 / span 2;

grid-column: 2 / span 2;

}

@media screen and (max-width: 768px) {

.container {

display: grid;

grid-template-columns: 1fr 1fr;

grid-gap: 10px;

}

.box2 {

grid-row: 1;

grid-column: 1;

}

}

@media screen and (max-width: 300px) {

.container {

display: grid;

grid-template-columns: 1fr;

grid-gap: 10px;

}

}

3

Yeah, I wish Mosh has taken more time to explain this particular concept but you can actually use grid-column and grid-row properties to specify the beggining and end of the block.

.gallery img:nth-of-type(2) {
grid-column: 2 / 4; *
grid-row: 1 / 3;
}

2 / 4 on grid-column means that it starts on 2nd track and ends on 4th (thus spaning two columns) and 1 / 3 on grid-row means that it starts on 1st track (meaning on top) and ends on 3rd (thus taking two rows).

Use Google Chrome Dev Tools to see the track lines on your grid.

And yeah, another thing is that you can use .gallery img:nth-of-type(x) to specify a partular image as opposed to give each of them a class.