@media only screen and (min-width: 721px) { .container{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(100px, auto); } div.item-1 { grid-column: 2 / 3; grid-row: 1; } div.item-2 { grid-column: 2 / 3; grid-row: 2; } div.item-3 { grid-column: 2 / 3; grid-row: 3; } } @media only screen and (max-width: 720px) { .container{ display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: 100px; grid-template-columns: 1fr; grid-auto-rows: minmax(100px, auto); } div.item-1 { grid-column: 1 / 1; grid-row: 1; } div.item-2 { grid-column: 1 / 1; grid-row: 2; } div.item-3 { grid-column: 1 / 1; grid-row: 3; } } div.round-border { border: 1px solid; padding: 0.01em 16px; border-radius: 16px; } .bg { background-color:#feffef; color:#00000; }