ameeeee
10/8/2019 - 2:54 AM

c-cards レスポンシブ：ブロックを並べて配置

ブロックを並べて配置

.markdown
content_copyfile_download
  • Rendered
  • Source

レスポンシブ：ブロックを並べて配置

A Pen by anonie on CodePen.

License.

index.html
content_copyfile_download
<div class="inner">
	
	<div class="c-cards">
		<article class="c-cards-item">
			<figure class="c-cards-item__imgarea">
			</figure>
			<div class="c-cards-item__txtarea">
				<h1 class="c-cards-item__ttl">見出し見出し見出し見出し見出し見出し見出し</h1>
				<p class="c-cards-item__txt">
				</p>
			</div>
		</article>

		<article class="c-cards-item">
			<figure class="c-cards-item__imgarea">
			</figure>
			<div class="c-cards-item__txtarea">
				<h1 class="c-cards-item__ttl">見出し見出し見出し見出し見出し見出し見出し</h1>
				<p class="c-cards-item__txt">
				</p>
			</div>
		</article>

		<article class="c-cards-item">
			<figure class="c-cards-item__imgarea">
			</figure>
			<div class="c-cards-item__txtarea">
				<h1 class="c-cards-item__ttl">見出し見出し見出し見出し見出し見出し見出し</h1>
				<p class="c-cards-item__txt">
				</p>
			</div>
		</article>

		<article class="c-cards-item">
			<figure class="c-cards-item__imgarea">
			</figure>
			<div class="c-cards-item__txtarea">
				<h1 class="c-cards-item__ttl">見出し見出し見出し見出し見出し見出し見出し</h1>
				<p class="c-cards-item__txt">
				</p>
			</div>
		</article>

		<article class="c-cards-item">
			<figure class="c-cards-item__imgarea">
			</figure>
			<div class="c-cards-item__txtarea">
				<h1 class="c-cards-item__ttl">見出し見出し見出し見出し見出し見出し見出し</h1>
				<p class="c-cards-item__txt">
				</p>
			</div>
		</article>

		<article class="c-cards-item">
			<figure class="c-cards-item__imgarea">
			</figure>
			<div class="c-cards-item__txtarea">
				<h1 class="c-cards-item__ttl">見出し見出し見出し見出し見出し見出し見出し</h1>
				<p class="c-cards-item__txt">
				</p>
			</div>
		</article>

		<article class="c-cards-item">
			<figure class="c-cards-item__imgarea">
			</figure>
			<div class="c-cards-item__txtarea">
				<h1 class="c-cards-item__ttl">見出し見出し見出し見出し見出し見出し見出し</h1>
				<p class="c-cards-item__txt">
				</p>
			</div>
		</article>

		<article class="c-cards-item">
			<figure class="c-cards-item__imgarea">
			</figure>
			<div class="c-cards-item__txtarea">
				<h1 class="c-cards-item__ttl">見出し見出し見出し見出し見出し見出し見出し</h1>
				<p class="c-cards-item__txt">
				</p>
			</div>
		</article>

		<article class="c-cards-item">
			<figure class="c-cards-item__imgarea">
			</figure>
			<div class="c-cards-item__txtarea">
				<h1 class="c-cards-item__ttl">見出し見出し見出し見出し見出し見出し見出し</h1>
				<p class="c-cards-item__txt">
				</p>
			</div>
		</article>
		
	</div>

</div>
.scss
content_copyfile_download
*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
  // width: 100%;
  // max-width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 1rem auto; padding: 1rem 0;} // 視認性用

.item01 { // 視認性用
	border: 3px solid #aaa;
}
.item02 {  // 視認性用
	border: 3px solid #ccc;
}
$breakpoints: (
	sp: "only screen and (max-width: 559px)",
	tb: "only screen and (max-width: 959px)",
	pc: "only screen and (min-width: 960px)"
);
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}
.pc {
  @include media(sp) {
    display: none !important;
  }
}
.sp {
  @include media(pc) {
    display: none !important;
  }
}
/// 以下モジュール ---------------------------------

.inner {
	// max-width: 1200px; 
	padding: 1em;	// 視認用
	margin: 2em;	// 視認用
}

// $cardNum: 4;
.c-cards {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	// padding: 1em;	// 視認用
	margin: auto 0;
	@media( max-width: 776px ){
		justify-content: space-around;
	}
	&-item {
		width: calc( ( 100% / 4 ) - ( 8% / 3 ) ); // project定義
		min-width: 200px; // project定義
		border: 3px solid #ccc; // 視認用
		margin-bottom: 1em; // project定義
		&__imgarea {
			height: 100px; // project定義
			background: #eee; //視認用
		}
		
	}
}
_cards.scss
content_copyfile_download
@charset "UTF-8";

// 関連ファイル------------------------------------

// プロジェクト依存設定 ------------------------------------
// $breakpoints: (
// 	sp: "only screen and (max-width: 559px)",
// 	tb: "only screen and (max-width: 959px)",
// 	pc: "only screen and (min-width: 960px)"
// );
// @mixin media($breakpoint) {
//   @media #{map-get($breakpoints, $breakpoint)} {
//     @content;
//   }
// }

// htmlサンプル ------------------------------------
	
<div class="c-cards">
	<article class="c-cards-item"></article>
	<article class="c-cards-item"></article>
	<article class="c-cards-item"></article>
	<article class="c-cards-item"></article>
	<article class="c-cards-item"></article>
	<article class="c-cards-item"></article>
	<article class="c-cards-item"></article>
</div>


//  -----------------------------------------------------

// $cardNum: 4;
.c-cards {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: auto 0;
	@media( max-width: 776px ){
		justify-content: space-around;
	}
// 	&-item {
		// width: calc( ( 100% / 4 ) - ( 8% / 3 ) ); // project定義
		// min-width: 200px; // project定義
		// margin-bottom: 1em; // project定義
// 	}
}