🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

Shorthand property is not working

In the code editor, we still have the code from the previous exercise. Let's remove the 4 properties that we used in the last lesson, and use the new shorthand properties this time. Keep the values and the layout exactly the same.
CSS-COURSE
by

4 Answers

kshitijrana14
please mention level and lesson id
anushika
Level 16 lesson 5 of CSS course
anushika
@kshitijrana14 could you please give the solution for the same.
kshitijrana14
Try this one


<!DOCTYPE html>

<html>

<head>

	<title>CSS Grid Item Placement</title>

	<style>

		.grid {

			display: grid;

			background-color: #d6d1f5;

			padding: 20px;

			grid-template-columns: [start] auto [line2] auto [line3] auto [end];

		}

		.item {

			background-color: #E7E4F8;

			border: 1px solid black;

			padding: 20px;

			text-align: center;

		}

		.item-x {

			background-color: #ED639E;

			grid-column: line2 / line3; 

			grid-row: 2 / span 2;

		}

	</style>

</head>

<body>

	<div class="grid">

		<div class="item">1</div>

		<div class="item">2</div>

		<div class="item">3</div>

		<div class="item item-x">4</div>

		<div class="item">5</div>

		<div class="item">6</div>

		<div class="item">7</div>

		<div class="item">8</div>

		<div class="item">9</div>

	</div>

</body>

</html>

Login / Signup to Answer the Question.

LoginSignup