CSSでリストから表を作る方法！2列3列4列のレイアウトはgridで簡単にできる！

/* 表にするCSSはこれだけ */
ul.listtest1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0; /* 要素間の大きさ：表に見えるように0にしておく */
}

/* 見かけの調整 */
ul.listtest1 > li {
    margin:0;		/* 隙間をなくす */
    padding:.5em; 	/* 内側余白を少し入れておく */
}

/* 罫線を付けてみる：なしでもOK */
ul.listtest1 > li {
    border: 1px solid #ccc;	/* 罫線 */
}
ul.listtest1 > li:not(:last-child) {
    border-right: none;	/* 左右の罫線の重なりをなくして綺麗に */
}

/* 表にするCSSはこれだけ */
ul.listtest1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0; /* 要素間の大きさ：表に見えるように0にしておく */
    white-space: nowrap; /* テキストを折り返さない */
}

/* 表にするCSSはこれだけ */
ul.listtest2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);	/* repeat(2, 1fr)が異なる */
    gap: 0;
}

/* 見かけの調整 */
ul.listtest2 > li {
    margin:0;		/* 隙間をなくす */
    padding:.5em; 	/* 内側余白を少し入れておく */
}

/* 罫線を付けてみる */
ul.listtest2 > li {
    border: 1px solid #ccc;	/* 罫線 */
}
ul.listtest2 > li:nth-child(n+3){
    border-top: none;	/* 上下の罫線の重なりをなくして綺麗に */
}
ul.listtest2 > li:nth-child(2n){
    border-left: none;	/* 左右の罫線の重なりをなくして綺麗に */
}

/* 表にするCSSはこれだけ */
ul.listtest3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);	/* repeatを2⇒3に変えただけ */
    gap: 0;
}

/* 見かけの調整 */
ul.listtest3 > li {
    margin:0;		/* 隙間をなくす */
    padding:.5em; 	/* 内側余白を少し入れておく */
}

/* 罫線を付けてみる */
ul.listtest3 > li {
    border: 1px solid #ccc;	/* 罫線 */
}
/* 上下の罫線の重なりをなくして綺麗に */
ul.listtest3 > li:nth-child(n+4){
    border-top: none;
}
/* 左右の罫線の重なりをなくして綺麗に */
ul.listtest3  li:nth-child(3n+2),
ul.listtest3  li:nth-child(3n+3){
    border-left:none;
}

/* 表にするCSSはこれだけ */
ul.listtest4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);	/* repeatを3⇒4に変えただけ */
    gap: 0;
}

/* 見かけの調整 */
ul.listtest4 > li {
    margin:0;		/* 隙間をなくす */
    padding:.5em; 	/* 内側余白を少し入れておく */
}

/* 罫線を付けてみる */
ul.listtest4 > li {
    border: 1px solid #ccc;	/* 罫線 */
}
/* 上下の罫線の重なりをなくして綺麗に */
ul.listtest4 > li:nth-child(n+5){
    border-top: none;
}
/* 左右の罫線の重なりをなくして綺麗に */
ul.listtest4  li:nth-child(4n+2),
ul.listtest4  li:nth-child(4n+3),
ul.listtest4  li:nth-child(4n+4){
    border-left:none;
}