Hi there!
Could you please share the finished CSS example for this exercise? Thanks!
Below is my CSS. The result looks pretty much the same as in your image, but I’m not sure if I used the most efficient techniques.
Interesting that in my final version with line-based placement, the text in the “article” was overlapping with images in “aside” (running behind them) until I put “width: 100%;” in there. It was pure guess and I have no idea why it helped and why it went wrong in the first place. Could you please advice on the correct solution?
For .grid, I also tried to use “grid-template-areas”, but the columns overlapped:
.grid {
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
display: grid;
grid-template-areas:
"article aside"
grid-template-columns: 4fr 1fr;
grid-gap: 20px;
}
article {
grid-area: article;
}
aside {
grid-area: aside;
}
Final version:
body {
background-color: #fff;
color: #333;
margin: 0;
font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}
img {
max-width: 100%;
display: block;
}
.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
max-width: 980px;
}
.grid {
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
display: grid;
grid-gap: 20px;
}
article {
grid-column: 1 / 5;
grid-row: 1;
width: 100%;
}
aside {
grid-column: 5;
grid-row: 1;
width: 100%;
}
nav {
background-color: #000;
padding: .5em;
position: sticky;
top: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
nav a {
color: #fff;
text-decoration: none;
padding: .5em 1em;
}
.photos {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 1px;
}
.feature {
width: 200px;
}
article img {
float: left;
margin-right: 1em;
}
Thank you!