```
\*,
\*::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;
}
```
}
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.
---
**Author:**  [@Mahant](https://forum.codewithmosh.com/u/Mahant)\
**Post date:** [September 8, 2021, 1:02pm UTC](https://forum.codewithmosh.com/t/html-css-pt-2-layout-exercise-2-photo-gallery/4905/2 "2021-09-08T13:02:35Z")
Here is my code bro
**HTML**
```
Responsive
```
```
```
**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;
```
}
}
---
**Author:**  [@pvkom26](https://forum.codewithmosh.com/u/pvkom26)\
**Post date:** [October 5, 2021, 5:35am UTC](https://forum.codewithmosh.com/t/html-css-pt-2-layout-exercise-2-photo-gallery/4905/3 "2021-10-05T05:35:58Z")
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.
