Почему при использовании Grid контент не становится в 2 колонки, а просто уходит влево?

Question

[Клим Куликов]

Макет:

Результат:

Код:

<section class="art">
			<div class="container">
				<div class="content">
					<img class="section-delimiter" src="./img/idk.png" alt="">
					<h2 class="art-title">Art of cakes</h2>
					<span class="suptitle">we create delicious memories</span>
					<p class="art-text">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. 
						Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, 
						tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed.</p>
					<span class="chef">Chef Cook</span>
					<div class="italian">
						<span class="italian-text benito">Benito</span>
						<img src="./img/chef.png" alt="" class="chef-img">
						<span class="italian-text gaspare">Gaspare</span>
					</div>
					<p class="quote">
						<img src="./img/rndm-text_06.png" alt="" class="comment">
					</p>
				</div>
				<img src="./img/art-img.png" alt="" class="art-img">
			</div>
		</section>

.art {
    background-image: url(./img/art-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 95px;
}

Comments

[Froggyweb]

У тебя в арт один вложенный элемент. поэтому и неоткуда второй колонке взяться

Answer 1

[weazyq]

В родителе .art лежит один контейнер, поэтому весь контент выстраивается в ряд