.td_big_date {width:200px;text-align:center}
.td_big_author {width:200px;text-align:center}
.grid-5 {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 30px;}
.grid-8 {display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 100px;}
.monster_div {display:flex;background-color:black;width:150px;height:150px;justify-content:center;align-items:center}

.grid-item {
    display: flex;
    flex-direction: column;
    justify-content:start;
    align-items: center;
}

pre {
    white-space: pre-wrap; /* 保留空白符和换行符，同时允许自动换行 */
    word-wrap: break-word; /* 确保长单词或 URL 换行 */
    overflow-wrap: break-word; /* 同上，兼容性更好 */
}

@media screen and (max-width:1366px) {
	.grid-5 {grid-template-columns: repeat(4, 1fr);}
    .grid-8 {grid-template-columns: repeat(6, 1fr);}

}

@media screen and (max-width:1280px) {
	.grid-5 {grid-template-columns: repeat(4, 1fr);}
    .grid-8 {grid-template-columns: repeat(6, 1fr);}
	
}

@media screen and (max-width:1024px) {
	.grid-5 {grid-template-columns: repeat(4, 1fr);}
    .grid-8 {grid-template-columns: repeat(6, 1fr);}
	
}

@media screen and (max-width:768px) {
	.grid-5 {grid-template-columns: repeat(2, 1fr);}
    .grid-8 {grid-template-columns: repeat(6, 1fr);}
	
}

@media screen and (max-width:640px) {
	.grid-5 {grid-template-columns: repeat(2, 1fr);}
    .grid-8 {grid-template-columns: repeat(4, 1fr);}
	
}