Skip to content

Commit

Permalink
learn CSS Grid
Browse files Browse the repository at this point in the history
  • Loading branch information
eudanielsilveira committed Jun 30, 2023
1 parent 3c02d51 commit ac4f1c6
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 1 deletion.
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,20 @@ <h2>max-width</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ipsum architecto excepturi alias commodi harum error, perferendis placeat consequatur nobis accusantium deserunt veritatis voluptatum eveniet libero ipsam sed quisquam nostrum.
</p>
</section>

<section class="gallery">
<a href="">
<img src="https://images.unsplash.com/photo-1688109510752-23afc8bcf6cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60" alt="">
</a>

<a href="#">
<img src="https://images.unsplash.com/photo-1688103920333-117afda88518?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="">
</a>

<a href="#">
<img src="https://images.unsplash.com/photo-1687955192776-5e45639ad1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="">
</a>
</section>
</main>
</div>
</body>
Expand Down
29 changes: 28 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ main {
}
.content {
max-width: 650px;
margin: 0 auto;
margin: 0 auto 5rem;
border: 1px solid;
padding: 1rem;
text-align: center;
Expand All @@ -50,4 +50,31 @@ span {
.content {
border: none;
}
}
@media (min-width: 1440px) {
.gallery {
display: grid;
justify-content: center;
gap: 3REM;
grid-template-areas: "A B"
"C B";
}
.gallery a:nth-child(1){
grid-area: A;
}
.gallery a:nth-child(2){
grid-area: B;
}
.gallery a:nth-child(3){
grid-area: C;
}
.gallery a {
width: 30.3rem;
}
.gallery img {
border-radius: 3rem;
width: 100%;
-o-object-fit: cover;
object-position: center;
}
}

0 comments on commit ac4f1c6

Please sign in to comment.