User:Perryprog/Userpage layout/styles.css

.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 10px 10px;
	margin-top: 10px; /* For consistency with other elements above */
	grid-template-areas:
    ". ub1 ub2 ."
    ". news news .";
    justify-items: center;
}

@media (max-width: 720px) {
	.grid-container {
		grid-template-areas:
		"ub1"
		"ub2"
		"news";
	}
}

.ub1 { grid-area: ub1; }

.ub2 { grid-area: ub2; }

.news {
	grid-area: news;
}

.news > .vertical-navbox {
	/* Nessessary as we are overriding inline styles */
	float: none !important;
	margin: initial !important;
}