Как адаптировать в верстке разные карточки с разным наполнением?

Question

[Сергей Попков]

Как адаптировать в верстке разные карточки с разным наполнением? При этом карточки занимают весь wrapper сетку на смартгриде от Дмитрия лаврика + еще одна карточка больше этого wrapper. для этого была создана кастомная сетка.

Answer 1

[Vaultboy84]

К сожалению мы не настолько хорошо знакомы с выдающейся сеткой от Дмитрия Лаврика, чтобы без кода диагностировать проблему и предложить решение.

Answer 2

[Сергей Попков]

<div id="container">
		<section class="box-2" id="tarif">
			<div class="bg__black3 backdrop-filter"></div>
			<div class="wrapper-big">
				<div class="rate flex">
					<div class="column-1">
						<div class="rate__row tabcontent" id="month">
							<div class="rate__card card__1">
								<div class="rate__card-img">
									Lorem
								</div>
								<div class="block">
									<div class="rate__card-strike">
										<strike>Lorem</strike>
									</div>
									<div class="block-price">
										<div class="rate__card-price">
											Lorem
										</div>
										<div class="rate__card-month">
											Lorem
										</div>
									</div>
									<div class="rate__card-rate">
										Lorem
									</div>
								</div>
								<div class="block2">
									<div class="rate__card-spin">
										<span>Lorem</span>Lorem
									</div>
									<div class="rate__card-percentage">
										<span>Lorem</span>Lorem
									</div>
								</div>
								<a href="#" class="rate__card-btn dbc">
									<div class="dnt">
										Lorem
									</div>
								</a>
							</div>
							<div class="rate__card card__2">
								<div class="rate__card-img">
									Lorem
								</div>
								<div class="block">
									<div class="rate__card-strike">
										<strike>Lorem</strike>
									</div>
									<div class="block-price">
										<div class="rate__card-price">
											Lorem
										</div>
										<div class="rate__card-month">
											Lorem
										</div>
									</div>
									<div class="rate__card-rate">
										Lorem
									</div>
								</div>
								<div class="block2">
									<div class="rate__card-spin">
										<span>Lorem</span>Lorem
									</div>
									<div class="rate__card-percentage">
										<span>Lorem</span>Lorem
									</div>
								</div>
								<a href="#" class="rate__card-btn dbc">
									<div class="dnt">
										Lorem
									</div>
								</a>
							</div>
							<div class="rate__card card__3">
								<div class="rate__card-img">
									Lorem
								</div>
								<div class="block">
									<div class="rate__card-strike">
										<strike>Lorem</strike>
									</div>
									<div class="block-price">
										<div class="rate__card-price">
											Lorem
										</div>
										<div class="rate__card-month">
											Lorem
										</div>
									</div>
									<div class="rate__card-rate">
										Lorem
									</div>
								</div>
								<div class="block2">
									<div class="rate__card-spin">
										<span>Lorem</span>Lorem
									</div>
									<div class="rate__card-percentage">
										<span>Lorem</span>Lorem Lorem
									</div>
								</div>
								<a href="#" class="rate__card-btn dbc">
									<div class="dnt">
										Lorem
									</div>
								</a>
							</div>
						</div>
					</div>
					<div class="column-2">
						<div class="rate__row">
							<div class="clock__card">
								<div id="clock">
									<div class="clock__tab">
										<div id='day'>
											<div class="bg__block">
												<div class="bg__clock">
													<p id='day0'></p>
												</div>
												<div class="bg__clock">
													<p id='day1'></p>
												</div>
											</div>
											<div class="clock__names-item">
												Дней
											</div>
										</div>
										<div id="razd">
											:
										</div>
										<div id='hour'>
											<div class="bg__block">
												<div class="bg__clock">
													<p id='hour0'></p>
												</div>
												<div class="bg__clock">
													<p id='hour1'></p>
												</div>
											</div>
											<div class="clock__names-item">
												Часов
											</div>
										</div>
										<div id="razd">
											:
										</div>
										<div id='min'>
											<div class="bg__block">
												<div class="bg__clock">
													<p id='min0'></p>
												</div>
												<div class="bg__clock">
													<p id='min1'></p>
												</div>
											</div>
											<div class="clock__names-item">
												Lorem
											</div>
										</div>
									</div>
								</div>
								<div class="clock__title">
									<p>
										Lorem ipsum dolor sit <br>
										amet, consectetur
									</p>
								</div>
								<div class="clock__text">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
										Fusce ac interdum nisl, et pharetra nisi. Nullam felis risus,
										volutpat eget euismod vel, accumsan non dolor. Phasellus non
										commodo urna. Sed dictum vehicula mi id tincidunt. Quisque
										ac ex et massa iaculis finibus eu id nulla. Nullam id ornare.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<div id="fakecontent"></div>
	<div class="progress">
		<div class="bar"></div>
	</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--<script type="text/javascript" src="js/animate-scroll.js"></script>-->

<!-- partial -->
<script src='js/vg-scroll.js'></script>

jQuery(document).ready(function($) {

    ////////////////////////////////////

    $(window).on('scroll', function () {
        $("#container").css("left", -$(window).scrollTop());
    });
});