CSSで思い通りの配置にできません。
解決したいこと
どうしてもこの画像の配置になりません。困っています・・・。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viweport" content="width=divce-width">
<title>weve</title>
</head>
<header>
<div class="title">
<img src="images/IMG_8661.PNG">
</div>
</header>
<body>
<div class="container">
<div class="big_item">
<img src="images/IMG_2470.JPG" alt="">
</div>
<div class="text">
<p>テキスト</p>
</div>
</div>
</div>
<div class="item">
<ul>
<li><img src="images/IMG_2343.jpg" alt="#"><a href="https://ncode.syosetu.com/n7954hb/" alt="#">
<figcaption>あ</figcaption></a></li>
<li><img src="images/IMG_2771.JPG" alt="#"><a href="https://kakuyomu.jp/works/16816452221467494905" alt="#">
<figcaption>カ</figcaption></a></li>
<li><img src="images/IMG_2781.JPG" alt="#"><a href="https://www.alphapolis.co.jp/novel/716043600/375514143" alt="#">
<figcaption>ア</figcaption></a></li>
</ul>
</div>```
```'CSS'
* {
box-sizing: border-box;
margin: 10px;
width: auto;
}
body {
text-align: center;
width: auto;
}
.big_item {
width: auto;
}
.item ul {
display: flex;
text-align: center;
}
.item li {
list-style: none;
}
.item li img {
width: 250px;
}
.container{
display: flex;
}
.text {
margin: 20px;
width: 400px;
text-align: center;
color: #010079;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}```
最初はgridで大きいimgとテキストをクラスづけにしてgridカラムを１fr１frで分けようとしましたが、その下のリストが配置できなくなってしまい現在のコードに変形しました・・・。
どなたかこの写真のような配置になる方法を教えていただけませんか？
0
