Second slide

您现在的位置是:网站首页前端技术-HTML5 > 文章内容

CSS Grid重构Medium的文章布局

admin 2018-11-01 20:19:04 浏览

好像有段时间没有发文了。最近一直在改博客,因为hexo博客的SEO并不太友好,文章页面权重太低。为了提高文章在搜索引擎中的权重,小编可需要花大把时间去整整了。

现在已经去掉了博客的tags,但是作者页面依然高于文章的权重,小编泪奔啊。

先不说这些了,还是说说CSS Grid吧。

我觉得这个就是为页面布局而生的CSS特性。

推荐大家看看这个介绍视频7分钟入门CSS Grid

小编已经准备在以后的后台项目中使用CSS Grid。

正文

当人们想起CSS Grid的时候,想到的通常是图片网格布局和全屏页面。然而,CSS Grid事实上也是一项很适用于文章布局的技术,它可以做一些以前很难完成的事情。

在本教程中,我将阐述怎样用CSS Grid去重构著名站点Medium的文章布局。

此文灵感来自于Scrimba上的免费CSS Grid教程。点此查看

 

本课程中的一个录屏中,我的同事Magnus Holm阐述了怎样将CSS Grid用于文章布局。

内容部分

我们将从一个基本的HTML文件开始,包含Medium上文章的典型内容类型。例如:标题、段落、子标题、图片、引用等等。如下所示:

<article>
<h1>Running any NPM package in the browser locallyh1>
<p>JavaScript has never had any official solution for distributing packages, and every web platform (Rails, Django etc) has their own idea of how to structure and package JavaScript. In the last few years NPM has started becoming the canonical way of distribution, with Webpack as the build system, but there’s no way to load NPM packages in the browser without a server-side component.p>
<blockquote>
<p>Scrimba is a platform for interactive coding screencast where         
you can run the code at any moment in time.p>
blockquote>
<figure>
<img src="https://mave.me/img/projects/full_placeholder.png">
figure>
复制代码

如果你不调整任何布局直接在浏览器中打开此文件,你看到的是这样子的:

 

一点也不美观。因此让我们一起用CSS Grid来调整一下吧。为了让大家都能跟得上,我们将一步一步来完成。

基本margins设置

我们要做的第一件事是将整个

标签变成一个grid容器,并设置至少三列。

 

article {
    display: grid;
    grid-template-columns: 1fr 740px 1fr;
}
复制代码

第一列和最后一列充当边缘部分并且自适应,它们大部分情况下包含着空白区域。中间一列固定为740px,将容纳文章的主体内容。

注意,我们没有定义行是因为每一行的高度都是由它们的自身内容所决定。文章中的每块内容(段落、图片、标题)自成一行。

下一步是确保网格中的所有内容默认开始于第二条纵向网格线。

article > * {
    grid-column: 2;
}
复制代码

现在我们得到如下结果:

 

我们立刻就发现它变得稍微好看一点了,因为两边的空白区域让文本更易于阅读了。

然而,将左右margin属性设置为auto也能实现这种效果,而且更简单。我们为什么要用CSS Grid呢?

好了,当我们想要模仿Medium上的图片的某些特性的时候,问题出现了。例如插入一张全屏宽的图片,像下面这样:

<p style="width: 100vw;margin-left:-webkit-calc(50% - 50vw);margin-left:calc(50% - 50vw);"><a href="/images/2018-04-20-recreate-medium-article-layout-with-grid/4.jpg" class="fancybox" rel="group"><img src="/images/2018-04-20-recreate-medium-article-layout-with-grid/4.jpg" alt="">a>p>
复制代码

 

 

如果我们之前用了margin: 0 auto, 我们将只能利用负边距(margins)来使得图片占据全屏宽度,这种方法显得很hack。

使用CSS Grid的话,可以很轻易的解决这个问题,我们只需要简单的用列来设置宽度。为了确保图片占据整个宽度,我们只需要将其跨度设置为从第一列到最后一列。

article > figure {
    grid-column: 1 / -1;
    margin: 20px 0;
}
复制代码

我们再设置一下上下边距,就得到了一幅漂亮的全屏宽的图片:


 

 

上一篇:第一页

下一篇:最后一页