コンテナー　1000px

Grid レイアウト

均等幅 1列でカラム数増減可能（アイテム増減しても自動で幅調整）

display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 20px;

均等幅 3カラム

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;

row gap と column gap を別々に指定

display: grid;
grid-template-columns: repeat(3, 1fr));
gap: 20px 40px; // row column

均等幅 メディアクエリ無しでレスポンシブ

画面幅に応じてカラム数が変化

display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 20px;

均等幅 メディアクエリでレスポンシブ
768px以上で2カラムに

.g-columns-mediaquery {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
}
@media (min-width: 768px) {
.g-columns-mediaquery {
grid-template-columns: repeat(2, 1fr);
}
}