82 lines
1.2 KiB
CSS
82 lines
1.2 KiB
CSS
|
header {
|
||
|
|
|
||
|
|
grid-column : 1 / span 2;
|
||
|
|
grid-row : 1 / 1;
|
||
|
|
}
|
||
|
|
section {
|
||
|
|
grid-column : 1 / 1;
|
||
|
|
grid-row : 2 / 2;
|
||
|
|
display : grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
grid-template-rows :auto 1fr 1fr;
|
||
|
|
|
||
|
|
}
|
||
|
|
nav ul {
|
||
|
|
|
||
|
|
display : flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
header h2 {
|
||
|
|
|
||
|
|
text-align: center;
|
||
|
|
background-color: lightgrey;
|
||
|
|
|
||
|
|
}
|
||
|
|
nav ul li {
|
||
|
|
flex-basis : auto;
|
||
|
|
|
||
|
|
display : inline-block;
|
||
|
|
}
|
||
|
|
section > h2 {
|
||
|
|
|
||
|
|
grid-column : 1 / 3;
|
||
|
|
grid-row : 1 / 2;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
aside {
|
||
|
|
padding-left : 0.25em;
|
||
|
|
|
||
|
|
}
|
||
|
|
article {
|
||
|
|
|
||
|
|
border : 1px solid gray;
|
||
|
|
padding : 0.25em;
|
||
|
|
margin : 0.25em;
|
||
|
|
}
|
||
|
|
article:nth-of-type(1){
|
||
|
|
|
||
|
|
grid-column : 1 / 1;
|
||
|
|
grid-row : 2 / 2;
|
||
|
|
}
|
||
|
|
article:nth-of-type(2){
|
||
|
|
|
||
|
|
grid-column : 2 / 2;
|
||
|
|
grid-row : 2 / 2;
|
||
|
|
}
|
||
|
|
article:nth-of-type(3){
|
||
|
|
|
||
|
|
grid-column : 1 / 1;
|
||
|
|
grid-row : 3 / 3;
|
||
|
|
}
|
||
|
|
article:nth-of-type(4){
|
||
|
|
|
||
|
|
grid-column : 2 / 2;
|
||
|
|
grid-row : 3 / 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
aside {
|
||
|
|
|
||
|
|
grid-column : 2 / 2;
|
||
|
|
grid-row : 2 / 2;
|
||
|
|
}
|
||
|
|
footer {
|
||
|
|
|
||
|
|
grid-column : 1 / 2;
|
||
|
|
grid-row : 3 / 3;
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 2fr 1fr;
|
||
|
|
grid-template-rows : auto 1fr auto;
|
||
|
|
}
|