3月29日作業分（カラムレイアウト）

index..html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column-layout</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<h1>Column-layout</h1>
<div class="col-wrapper">

<div class="col-box">
<a href="img/01.jpg" data-lightbox="photo"><img src="img/01.jpg" alt=""></a>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/02.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->


<div class="col-box">
<img src="img/03.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/04.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/05.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/06.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/07.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->
<div class="col-box">
<img src="img/08.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/09.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->


<div class="col-box">
<img src="img/10.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/11.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->
<div class="col-box">
<img src="img/12.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/13.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/14.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/15.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/16.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->
</div><!-- /.col-wrapper -->

<div class="button02">
  <a href="#" id="more" ></a>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src="js/lightbox.js"></script>
<script>
$(function(){
$('#more').on('click',function(){
$('.col-box:nth-of-type(n+5)').fadeToggle(200);
$(this).toggleClass('close');
return false;
});
});
</script>
</body>
</html>

style.css

@use "reset";
@use "lightbox";

//ブレイクポイントの設定
$l-point:959px;
$m-point:765px;
$s-point:420px;
//mixinの設定
@mixin size-l {
  @media (max-width:$l-point){
    @content;
  }
}
@mixin size-m {
  @media (max-width:$m-point){
    @content;
  }
}
@mixin size-s {
  @media (max-width:$s-point){
    @content;
  }
}


body{
font-family: 'Dosis', sans-serif;
background-color: #adc4da;
}
h1{
text-align: center;
padding: 30px 0;
font-size: 54px;
}
.col-wrapper{
width: 90%;
margin: 0 auto 50px;
columns: 4;
@include size-l{
columns: 3;
}
@include size-m{
columns: 2;
}
@include size-s{
columns: 1;
}
column-gap: 20px;
}
.col-box{
break-inside: avoid;
background-color: #FFF;
padding: 10px;
margin-bottom: 20px;
@include size-s{
&:nth-of-type(n+5){
display: none;
}
}

h2{
margin: 10px 0 2px;
}
p{
font-size: 20px;
}
}

.button02{
display: none;
@include size-s{
display: block;
}
}
.button02 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 50px;
  padding: 1em 2em;
  width: 300px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: #cccccc;
  border-radius: 50vh;
}
.button02 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}
.button02 a:hover {
  text-decoration: none;
  background-color: #bbbbbb;
}
#more::before{
content: "もっと見る";
}
#more.close::before{
content: "閉じる";
}