grid布局实现响应式图片网格

任务目标

  • 利用grid布局实现响应式图片网格,如下图:

核心概念

  • fr:CSS Grid 带来的一个全新值,称为等分单位 。它允许将容器可用空间分成想要的多个等分空间
  • repeat()函数:grid布局中指定列和行更强大的方法
  • auto-git:列数自适应
  • minmax()函数:定义网格项目的宽度范围

实现代码

html:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/grid-picture.css" media="screen">
    <title>响应式图片展示title>
head>
<body>
    <div class="container">
        <div class="pic">1div>
        <div class="pic">2div>
        <div class="pic">3div>
        <div class="pic">4div>
        <div class="pic">5div>
        <div class="pic">6div>
        <div class="pic">7div>
        <div class="pic">8div>
    div>
body>
html>

css:

.container{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    grid-template-rows: repeat(200px);
}
.pic{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: dodgerblue;
    height: 200px;
    text-align: center;   
    color: #fff;
    font-size: 60px;
}

运行结果:
grid布局实现响应式图片网格_第1张图片
grid布局实现响应式图片网格_第2张图片
grid布局实现响应式图片网格_第3张图片
grid布局实现响应式图片网格_第4张图片

你可能感兴趣的:(前端基础)