Как правильно построить две колонки на Css grid

184

24 февраля 2022, 00:00

Не получается построить две колонки

.main{ 
	display: grid; 
  	grid-template-columns: 500px 800px; 
	grid-gap: 10px;  
}

{% load static %} 
 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Main</title> 
	<link rel="stylesheet" href="{% static './css/main.css' %}"> 
	<link rel="stylesheet" href="{% static './css/reset.css' %}"> 
</head> 
<body> 
	<div class="main"> 
		<div class="header"> 
			<h1 class='user-title'>Musik</h1> 
			<img src="{% static './img/User.png' %}" width="300" height="300" alt="user-title" class="user-picture"> 
			<nav class="header-menu"> 
				<ul class="header-list"> 
					<li class="header-item"> 
						<a href="#!" class="header-link">My Posts</a> 
					</li> 
					<li class="header-item"> 
						<a href="#!" class="header-link">Posts</a> 
					</li> 
					<li class="header-item"> 
						<a href="#!" class="header-link">Friends</a> 
					</li> 
					<li class="header-item"> 
						<a href="#!" class="header-link">Edit</a> 
					</li> 
					<li class="header-item"> 
						<a href="#!" class="header-link">Exit</a> 
					</li> 
 
				</ul> 
			</nav> 
		</div> 
		<div class="posts"> 
			<img src="{% static './img/User.png' %}" width="100" height="100" alt="user-title" class="user-picture"> 
			<h2 class="post-title">Moving To A New Location</h2> 
		</div> 
	</div> 
</body> 
</html>