.secarticle.articleGrid
ul.articleGrid__list
li.articleGrid__item
.card
h2.card__ttl card01
p.card__txt Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit laboriosam consequuntur, deserunt ullam magni nam ipsum tempore exercitationem perspiciatis minus quaerat vitae quam quidem provident repudiandae expedita. Unde, sapiente soluta.
a.card__more(herf="#") More
li.articleGrid__item
.card
h2.card__ttl card02
p.card__txt Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt veritatis ducimus rem praesentium quam eius fugit qui quo, sequi dolores inventore ullam hic nam deserunt repellat aliquid ratione cum autem.
a.card__more(herf="#") More
li.articleGrid__item
.card
h2.card__ttl card03
p.card__txt Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum, accusantium velit nemo consequuntur ullam molestias labore quas assumenda quis iste ut, asperiores saepe, quae nulla perferendis vero. Laudantium, quo aliquid!
a.card__more(herf="#") More
section.sec
div.card
h2.card__ttl card04
p.card__txt Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum, accusantium velit nemo consequuntur ullam molestias labore quas assumenda quis iste ut, asperiores saepe, quae nulla perferendis vero. Laudantium, quo aliquid!
a.card__more(herf="#") More@container (min-width: 400px){
.card{
display: flex;
flex-wrap: wrap;
}
.card__txt{
flex: 1;
margin-right: 16px;
}
}
@container card-container (max-width: 500px){
.card__txt{
font-size: max(5cqw, 14px);
}
}
body{
color: #fff;
background: #666;
}
.articleGrid{
width: calc(100% - 40px);
&__list{
display: grid;
gap: 16px;
grid-template-columns: repeat(2, 1fr);
list-style: none;
@media (max-width: 760px){
grid-template-columns: repeat(1, 1fr);
}
}
&__item{
container-type: inline-size;
}
}
.card{
padding: 24px;
border: 1px solid #fff;
border-radius: 10px;
box-sizing: border-box;
container-name: card-container;
container-type: inline-size;
&__ttl{
width: 100%;
font-size: max(8cqw, 18px);
}
&__more{
display: inline-flex;
align-items: center;
padding: 8px;
color: #333;
background: #fff;
&::after{
content: "▶";
margin-left: 8px;
font-size: 10px;
}
}
}
.sec{
margin: 0 auto;
width: calc(100% - 78px);
container-type: inline-size;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.