css
Data utworzenia: 2025-05-27 07:06:23
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #222;
color: beige;
font-size: 30px;
/* display: flex; */
/* justify-content: center;
align-items: center;*/
}
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 5px;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
grid-column: 1;
grid-row: 1;
}
.box2 {
grid-column: 2;
grid-row: 1;
}
.box3 {
grid-column: 3/6;
}
.box4 {
grid-column: 2/5;
grid-row: 2;
}
.box5 {
grid-column: 1;
grid-row: 2;
}
.box6 {
grid-column: 5;
grid-row: 2;
}
.box7 {
grid-column: 1/6;
}
.box8 {
grid-column: 2/5;
grid-row: 4;
}
.box9 {
grid-column: 3;
grid-row: 5;
}
.box10 {
grid-column: 1;
grid-row: 5;
}
.box11 {
grid-column: 5;
grid-row: 5;
}
.box12 {
grid-column: 1;
grid-row: 4;
}
.box13 {
grid-column: 5;
grid-row: 4;
}
.box14 {
grid-column: 4;
grid-row: 5;
}
.box15 {
grid-column: 2;
grid-row: 5;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
img {
width: 100%;
height: 100%;
}
Powrót