关于grid布局游戏的通关答案
回复数(0) 浏览数(17)
{{topic.upvote_count || 0}} 编辑 回复

第一关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start:3;
}

第二关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#poison {
    grid-column-start:5;
}

第三关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 1;
    grid-column-end:4;
}

第四关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 5;
    grid-column-end:2;
}

第五关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 1;
    grid-column-end:5;
}

第六关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#poison {
    grid-column-start:4;
}

第七关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 2;
    grid-column-end:4;
}

第八关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 1;
    grid-column-end:6;
}

第九关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start:3;
    grid-column-end: 6;
}

第十关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column:4 / 6;
}

第十一关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column:2 / 5;
}

第十二关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-row-start:3;
}

第十三关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-row:3 / 6;
}

第十四关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#poison {
    grid-column:2 / 3;
    grid-row:5 / 6;
}

第十五关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column:2 / 6;
    grid-row:1 / 6;
}

第十六关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-area:1 / 2 / 4 / 6;
}

第十七关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water-1 {
    grid-area: 1 / 4 / 6 / 5;
}
#water-2 {
    grid-area:2 / 3 / 5 / 6;
}

第十八关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
.water {
    order: 0;
}
#poison {
    order:1;
}

第十九关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
.water {
    order: 0;
}
.poison {
    order:-1;
}

第二十关

#garden {
    display: grid;
    grid-template-columns:50%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column: 1;
    grid-row: 1;
}

第二十一关

#garden {
    display: grid;
    grid-template-columns:repeat(8,12.5%);
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column: 1;
    grid-row: 1;
}

第二十二关

#garden {
    display: grid;
    grid-template-columns:100px 3em 40%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

第二十三关

#garden {
    display: grid;
    grid-template-columns:1fr 5fr;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

第二十四关

#garden {
    display: grid;
    grid-template-columns:50px 1fr 1fr 1fr 50px;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-area: 1 / 1 / 6 / 2;
}
#poison {
    grid-area: 1 / 5 / 6 / 6;
}

第二十五关

#garden {
    display: grid;
    grid-template-columns:75px 3fr 2fr;
    grid-template-rows: 100%;
}

第二十六关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 12.5px 12.5px 12.5px 12.5px 1fr;
}
#water {
    grid-column: 1 / 6;
    grid-row: 5 / 6;
}

第二十七关

#garden {
    display: grid;
    grid-template:60%/200px;
}
#water {
    grid-column: 1;
    grid-row: 1;
}

第二十八关

#garden {
    display: grid;
    grid:1fr 50px/1fr 4fr;
}
{{topic.upvote_count || 0}}

第一关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start:3;
}

第二关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#poison {
    grid-column-start:5;
}

第三关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 1;
    grid-column-end:4;
}

第四关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 5;
    grid-column-end:2;
}

第五关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 1;
    grid-column-end:5;
}

第六关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#poison {
    grid-column-start:4;
}

第七关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 2;
    grid-column-end:4;
}

第八关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start: 1;
    grid-column-end:6;
}

第九关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column-start:3;
    grid-column-end: 6;
}

第十关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column:4 / 6;
}

第十一关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column:2 / 5;
}

第十二关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-row-start:3;
}

第十三关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-row:3 / 6;
}

第十四关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#poison {
    grid-column:2 / 3;
    grid-row:5 / 6;
}

第十五关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column:2 / 6;
    grid-row:1 / 6;
}

第十六关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-area:1 / 2 / 4 / 6;
}

第十七关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water-1 {
    grid-area: 1 / 4 / 6 / 5;
}
#water-2 {
    grid-area:2 / 3 / 5 / 6;
}

第十八关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
.water {
    order: 0;
}
#poison {
    order:1;
}

第十九关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
.water {
    order: 0;
}
.poison {
    order:-1;
}

第二十关

#garden {
    display: grid;
    grid-template-columns:50%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column: 1;
    grid-row: 1;
}

第二十一关

#garden {
    display: grid;
    grid-template-columns:repeat(8,12.5%);
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-column: 1;
    grid-row: 1;
}

第二十二关

#garden {
    display: grid;
    grid-template-columns:100px 3em 40%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

第二十三关

#garden {
    display: grid;
    grid-template-columns:1fr 5fr;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

第二十四关

#garden {
    display: grid;
    grid-template-columns:50px 1fr 1fr 1fr 50px;
    grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
    grid-area: 1 / 1 / 6 / 2;
}
#poison {
    grid-area: 1 / 5 / 6 / 6;
}

第二十五关

#garden {
    display: grid;
    grid-template-columns:75px 3fr 2fr;
    grid-template-rows: 100%;
}

第二十六关

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 12.5px 12.5px 12.5px 12.5px 1fr;
}
#water {
    grid-column: 1 / 6;
    grid-row: 5 / 6;
}

第二十七关

#garden {
    display: grid;
    grid-template:60%/200px;
}
#water {
    grid-column: 1;
    grid-row: 1;
}

第二十八关

#garden {
    display: grid;
    grid:1fr 50px/1fr 4fr;
}
17
回复 编辑