console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=, initial-scale=">
	<meta http-equiv="X-UA-Compatible" content="">
	<title></title>
</head>

<body>
	<div>
		<ol class="odd">
			<li>content</li>
			<li>content</li>
			<li>content</li>
		</ol>
        <ol class="even">
			<li>content</li>
			<li>content</li>
			<li>content</li>
		</ol>

	</div>
</body>

</html>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
}
/* 容器 */
div {
    /* 因为代码试验场的显示区域宽度有点不确定，所以先设置成80vw */
    width: 80vw; 
    padding: 2rem;
    background: pink;
}

ol {
    width: 100%;
    display: grid;
    gap: 4%;
    margin-bottom: 32px;
}

/* 依据奇数偶数变化 */
.odd {
    grid-template-columns: 42%  25%  25% ;
}

.even {
    grid-template-columns:  25%  25% 42%;

}

li {
    box-shadow: 0 0 12px rgba(160, 160, 160, 0.5);
    list-style: none;
    padding: 0.5rem 1rem;
    min-height: 200px;
    margin: 0.25rem 0;
    background: #eee;
}