Как расположить элемент в grid контейнере?

Question

[nwtoneseo]

Надо расположить элемент в грид контейнере на 2fr без переноса, пока что получается только с переносом на 3 строку, а нужно в 2.

<div class="choice-wrapper">
                <div class="choice-top-item choice-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                        <path d="M42.5717 22.0862V23.8211C42.5694 27.8874 41.2526 31.8442 38.8179 35.1011C36.3831 38.358 32.9607 40.7406 29.0612 41.8935C25.1617 43.0465 20.994 42.9081 17.1796 41.4988C13.3652 40.0896 10.1085 37.4851 7.89523 34.0738C5.68198 30.6625 4.63074 26.6271 4.8983 22.5695C5.16585 18.5119 6.73787 14.6496 9.37989 11.5584C12.0219 8.46723 15.5924 6.31292 19.5588 5.41676C23.5252 4.52061 27.6751 4.93061 31.3894 6.58563" stroke="#DB0812" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/>
                        <path d="M40.0488 12.9863L25.2192 27.664L19.1122 21.5488" stroke="#DB0812" stroke-width="4" stroke-linecap="square"/>
                    </svg>
                    <div class="choice-small-title">
                        Прибыль
                    </div>
                    <div class="choice-desr">
                        Увеличите продажи за счет повышения производительности сотрудников
                    </div>
                </div>
                <div class="choice-top-item choice-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="49" height="48" viewBox="0 0 49 48" fill="none">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M20.1237 2C18.6746 2 17.3637 3.04957 17.1621 4.56932L16.5589 8.77559C15.9214 9.09596 15.3153 9.45428 14.7385 9.83823L10.7691 8.24408L10.7608 8.24076L10.7525 8.23751C9.38702 7.70318 7.80358 8.22937 7.06299 9.55505L3.07581 16.4529C2.29518 17.7856 2.67225 19.4159 3.80445 20.3098L3.80444 20.3098L3.81173 20.3155L7.16387 22.9368C7.13898 23.2827 7.12374 23.6386 7.12374 24C7.12374 24.3614 7.13898 24.7173 7.16387 25.0632L3.81173 27.6845L3.81171 27.6845L3.80445 27.6902C2.61353 28.6304 2.36967 30.2542 3.04795 31.4977L3.05981 31.5194L3.0722 31.5409L7.06295 38.4449C7.83665 39.8303 9.45658 40.2344 10.7072 39.7796L10.7384 39.7683L10.7691 39.7559L14.7305 38.165C15.3148 38.5559 15.9237 38.9112 16.5594 39.2276L17.1621 43.4307C17.3637 44.9504 18.6746 46 20.1237 46H28.1237C29.5729 46 30.8838 44.9504 31.0854 43.4307L31.6885 39.2244C32.3261 38.904 32.9322 38.5457 33.5089 38.1618L37.4784 39.7559L37.4866 39.7592L37.4949 39.7625C38.8604 40.2968 40.4439 39.7706 41.1845 38.445L45.1753 31.5409L45.1877 31.5194L45.1995 31.4977C45.8778 30.2542 45.6339 28.6304 44.443 27.6902L44.4358 27.6845L41.0842 25.0636C41.1087 24.7222 41.1237 24.3681 41.1237 24C41.1237 23.6319 41.1087 23.2778 41.0842 22.9364L44.4358 20.3155L44.443 20.3098C45.6339 19.3696 45.8778 17.7458 45.1995 16.5023L45.1877 16.4806L45.1753 16.4591L41.1846 9.55515C40.4109 8.16974 38.7909 7.76563 37.5403 8.22041L37.5091 8.23173L37.4784 8.24408L33.517 9.83501C32.9327 9.44414 32.3238 9.08876 31.6881 8.77236L31.0854 4.56932C30.8838 3.04957 29.5729 2 28.1237 2H20.1237ZM20.3635 10.4239L20.9979 6H27.2496L27.884 10.4239L28.0464 11.5566L29.1053 11.9906C30.1485 12.4181 31.1148 12.9856 32.0243 13.6852L32.9294 14.3815L33.9891 13.9559L38.1437 12.2874L41.2769 17.7078L37.7517 20.4645L36.8586 21.163L36.9992 22.2881C37.0743 22.889 37.1237 23.4374 37.1237 24C37.1237 24.5626 37.0743 25.111 36.9992 25.7119L36.8586 26.837L37.7517 27.5355L41.2769 30.2922L38.1437 35.7126L33.9891 34.0441L32.9444 33.6245L32.0437 34.3C31.1071 35.0024 30.1344 35.5876 29.1053 36.0094L28.0464 36.4434L27.884 37.5761L27.2496 42H20.9979L20.3635 37.5761L20.2011 36.4434L19.1422 36.0094C18.099 35.5819 17.1327 35.0144 16.2232 34.3148L15.318 33.6185L14.2584 34.0441L10.1038 35.7126L6.97056 30.2922L10.4958 27.5355L11.3889 26.837L11.2483 25.7119C11.1734 25.1129 11.1237 24.5438 11.1237 24C11.1237 23.4562 11.1734 22.8871 11.2483 22.2881L11.3889 21.163L10.4958 20.4645L6.97056 17.7079L10.1038 12.2874L14.2584 13.9559L15.3031 14.3755L16.2037 13.7C17.1403 12.9975 18.1131 12.4124 19.1422 11.9906L20.2011 11.5566L20.3635 10.4239ZM19.2651 24C19.2651 21.2446 21.5096 19 24.2651 19C27.0205 19 29.2651 21.2446 29.2651 24C29.2651 26.7554 27.0205 29 24.2651 29C21.5096 29 19.2651 26.7554 19.2651 24ZM24.2651 15C19.3005 15 15.2651 19.0354 15.2651 24C15.2651 28.9646 19.3005 33 24.2651 33C29.2296 33 33.2651 28.9646 33.2651 24C33.2651 19.0354 29.2296 15 24.2651 15Z" fill="#DB0812"/>
                    </svg>
                    <div class="choice-small-title">
                        Практику
                    </div>
                    <div class="choice-desr">
                        Будете обеспечены всеми необходимыми материалами для прохождения практики
                    </div>
                </div>
                <div class="choice-top-item choice-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                        <ellipse cx="23.6122" cy="24" rx="18.6122" ry="19" stroke="#DB0812" stroke-width="4"/>
                        <path d="M23.2852 15V26.3333L29.3253 30" stroke="#DB0812" stroke-width="4" stroke-linecap="square"/>
                    </svg>
                    <div class="choice-small-title">
                        Время
                    </div>
                    <div class="choice-desr">
                        Потратите меньше времени на обучение, получив больше полезной информации
                    </div>
                </div>
                <div class="choice-top-item choice-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
                        <path d="M8 41.5V27.3772H18.4615V41.5V17.5526H28.9231V41.5V6.5H40V41.5H8Z" stroke="#DB0812" stroke-width="4"/>
                    </svg>
                    <div class="choice-small-title">
                        Рост
                    </div>
                    <div class="choice-desr">
                        Уменьшите количество простоев из-за ошибок, допущенных персоналом
                    </div>
                </div>
                <div class="choice-bottom-item choice-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M21.7166 5.0918H20.4933L19.9361 6.18085L13.3434 19.0666H9.36677H8.53834L7.95255 19.6524L5.67758 21.9274L5.0918 22.5131V23.3416V37.9664V38.7948L5.67758 39.3806L7.95255 41.6556L8.53834 42.2413H9.36677H33.0914H34.3275L34.8803 41.1358L42.3552 26.186L42.9999 24.8966L41.9806 23.8773L41.6556 23.5523L37.7556 19.6524L37.1698 19.0666H36.3414H29.8915V7.0918V5.0918H27.8915H21.7166ZM16.3472 21.9776L22.9399 9.0918H25.8915V20.7416V21.0666V23.0666H27.8915H35.513L38.1328 25.6865L31.8554 38.2413H16.2411V22.1849L16.3472 21.9776ZM12.2411 23.0666H10.1952L9.0918 24.17V37.1379L10.1952 38.2413H12.2411V23.0666Z" fill="#DB0812"/>
                    </svg>
                    <div class="choice-small-title">
                        Качество
                    </div>
                    <div class="choice-desr">
                        Все преподаватели EKF — это сертифицированные тренеры с большим стажем в энергетике и на производствах
                    </div>
                </div>

                <div class="choice-bottom-item choice-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M18 8C14.6863 8 12 10.6863 12 14C12 17.3137 14.6863 20 18 20C21.3137 20 24 17.3137 24 14C24 10.6863 21.3137 8 18 8ZM8 14C8 8.47715 12.4772 4 18 4C23.5228 4 28 8.47715 28 14C28 19.5228 23.5228 24 18 24C12.4772 24 8 19.5228 8 14ZM9.17157 26H10H26H26.8284L27.4142 26.5858L33.4142 32.5858L34 33.1716V34V42V44H32H4H2V42V34V33.1716L2.58579 32.5858L8.58579 26.5858L9.17157 26ZM10.8284 30L6 34.8284V40H30V34.8284L25.1716 30H10.8284ZM36 14C36 10.6863 33.3137 8 30 8V4C35.5229 4 40 8.47715 40 14C40 19.5228 35.5229 24 30 24V20C33.3137 20 36 17.3137 36 14ZM38 25.1716L39.4142 26.5858L45.4142 32.5858L46 33.1716V34V42V44H42V42V34.8284L36.5858 29.4142L35.1716 28L38 25.1716Z" fill="#DB0812"/>
                    </svg>
                    <div class="choice-small-title">
                        Персонал
                    </div>
                    <div class="choice-desr">
                        Получите персонал, разбирающийся в оборудовании применительно к вашему проекту или объекту

                    </div>
                </div>
                <div class="choice-img"></div>
        </div>

.choice-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 24px;
}
.choice-item {
	padding: 48px;
	background: #F7F9FA;
	padding-bottom: 28px;
}
.choice-img {
	max-width: 636px;
	object-fit: cover;
	grid-column: 1 / 4;
	height: 100%;
}

Comments

[Ankhena]

Покажите скрином что нужно. А из кода сделайте работающую песочницу на codepen.io

[nwtoneseo]

Ankhena,

codepen - https://codepen.io/nwtseo/pen/vYPoJBL

[Ankhena]

nwtoneseo, так и пишите, что нужно с 3 по 5, а не с 2 по 4. Или просто span 2

[nwtoneseo]

Ankhena, спасибо большое

Answer 1

[Анастасия Foxman]

.choice-top-item {
  grid-column: 1 / 3; /* Этот элемент занимает первые две колонки */
  grid-row: 1; /* Это поместит элемент в первую строку */
}