I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they are visually very pleasing to the eye. While scrolling through these designs, I always wonder about one thing, that is, how difficult would it be to express these same designs as a code. The reason behind this curiosity is that I have come to realize that sometimes it is not easy to translate the design into its corresponding code. And when I say translation, I’m talking about the positioning of elements to be specific. There have been times while coding, I had to alter my design since it was difficult to represent the position of content in the original design. Also, from my personal experience, I can say that it is very frustrating to use tables, floats, positioning, and inline-block as all of these techniques miss out on a few major functionalities (vertical alignment, for example).

我喜欢在Behance，Dribble等平台上浏览网站设计，因为它们在视觉上非常令人愉悦。 在浏览这些设计时，我总是想知道一件事，即将这些相同的设计表示为代码有多困难。 这种好奇心背后的原因是，我已经意识到有时候将设计转换成相应的代码并不容易。 当我说翻译时，我指的是具体元素的定位。 有时在编码时，由于很难在原始设计中表示内容的位置，因此我不得不更改设计。 另外，根据我的个人经验，我可以说使用表，浮点数，定位和内联块非常令人沮丧，因为所有这些技术都缺少一些主要功能(例如，垂直对齐)。

For a recent personal project, I had to develop a landing page for a website. I had a rough idea regarding how I want the landing page to look and feel. My basic objective here was to replicate the design of the landing page which I will be doing beforehand, into a coded webpage version without any design compromises. While looking for an efficient way to build more design-oriented web pages, I came across CSS Grid and CSS Flexbox which are basically responsive layout models. These models not only allow us to tackle the positioning problem but also make the code easier to understand and maintain. Therefore, I decided to combine these two layout models along with my knowledge of working with Figma, which is an amazing online website design tool and this article explains that process.

对于最近的个人项目，我必须开发一个网站的登录页面。 我对目标网页的外观和感觉有一个大概的了解。 我的基本目标是将我将要预先进行的目标网页设计复制到编码的网页版本中，而不会进行任何设计折衷。 在寻找一种有效的方法来构建更多面向设计的网页时，我遇到了CSS Grid和CSS Flexbox，它们基本上是响应式布局模型。 这些模型不仅使我们能够解决定位问题，而且使代码更易于理解和维护。 因此，我决定将这两种布局模型与我与Figma一起工作的知识相结合，这是一个了不起的在线网站设计工具，本文将对此过程进行说明。

怎么了 (What’s the flow?)

1. Design the landing page using Figma.
   使用Figma设计登录页面。
2. Use CSS Grid to setup a parent grid.
   使用CSS网格设置父网格。
3. Use CSS Flexbox to position the content.
   使用CSS Flexbox定位内容。

如何开始？ (How to start?)

设计布局 (Design the layout)

First things first, I created the design in Figma. It has a pre-built website frame, which is like a blank canvas and a good place to start.

首先，我在Figma中创建了设计。 它有一个预建的网站框架，就像一块空白的画布，是一个很好的起点。

As I had decided that I am going to use CSS Grid, I knew that it divides the web page into rows and columns. Therefore, it would be practical to carry out the same division while designing by dividing the layout into three basic row sections which are present in almost all websites i.e. a header, a body, and a footer.

当我决定要使用CSS Grid时，我知道它会将网页分为行和列。 因此，在进行设计时，通过将布局划分为三个基本行部分(在几乎所有网站中都存在)，即页眉，正文和页脚，进行相同的划分是可行的。

My rule was to distribute the content into different possible rows and columns as it will make every element independent of each other. This will lead to more number of cells for more number of elements but will guarantee more positioning ease. So keeping that in mind, I initially divided the header section into two columns.

我的规则是将内容分配到可能的不同行和列中，因为它将使每个元素彼此独立 。 这将导致更多单元的数量更多的单元，但将保证更多的定位便利性。 因此请记住，我最初将标题部分分为两列。

But I wanted to maintain some spacing between each element for consistency purposes. Also, the Hamburger menu, which is much of an icon representing an inactive section, does not need much space. That’s why having 3 varying columns instead of 2 would be a better choice.

但是我想在每个元素之间保持一定的间隔，以实现一致性。 此外，“汉堡包”菜单(大部分是代表不活动部分的图标)不需要太多空间。 这就是为什么使用3个不同的列而不是2个列会是一个更好的选择的原因。

Now there are two things that I kept in mind going forward with this design strategy:

现在，在此设计策略中我要牢记两件事：

• Spacing between cells
  单元格之间的间距
• Size of the cells with respect to its content(elements).
  单元格相对于其内容(元素)的大小。

Next, I divided the Body section into different rows and columns.

接下来，我将“正文”部分划分为不同的行和列。

left_space and right_space are blank columns that are present to provide a feel of center alignment. Footer section will also be divided into 3 columns which is similar to the header section.

left_space和right_space是空白列，用于提供中心对齐的感觉。 页脚部分也将分为三列，与页眉部分相似。

Now after laying out the landing page design in terms of grids, the next thing to do was to layout the content with respect to the background of the web page.

现在，在以网格的形式对着陆页设计进行了布局之后，接下来要做的就是相对于网页背景来布局内容。

The hierarchy of the web page is logically in the following form:

该网页的层次结构在逻辑上采用以下形式：

1. Web page has a Background
   网页有背景
2. Grid goes on top the Background
   网格位于背景的最上方
3. Content is laid out on the grid
   内容排列在网格上

The dependency between background and the grid is decided by what comes first. In my process, I preferred the grid to be laid out first and then the background under it. I grabbed a background image from Pexels and then resized and positioned it according to the grid on the web page.

背景和网格之间的依赖关系由先到者决定。 在我的过程中，我更喜欢先布局网格，然后再布局其下方的背景。 我从Pexels抓取了一个背景图像，然后根据网页上的网格对其进行了调整大小和定位。

Now it was time to lay out the content using the designed grid system.

现在是时候使用设计的网格系统对内容进行布局了。

Lesson learned: Use standard alignments i.e. left, center and right for approximate positioning. Then precisely position the content using padding and/or margins.

经验教训：使用标准对齐方式，即左，中和右进行近似定位。 然后使用填充和/或边距精确定位内容。

As the content is going to be inside different cells, it can have different positions. And this requirement can be fulfilled by Flexbox. My major objective behind using Flexbox inside cells was to use it’s pre-built position attributes which can be used for alignment.

由于内容将位于不同的单元格中，因此可以具有不同的位置。 Flexbox可以满足此要求。 在单元格内部使用Flexbox的主要目的是使用其可用于对齐的预先建立的位置属性。

If you observe each part of the content, it is approximately either on the left or right or in the center in each cell. This will make it easier to mimic the design in the coding phase.

如果您观察内容的每个部分，则大约在每个单元格的左侧或右侧或中心。 这将使在编码阶段模仿设计变得更加容易。

下一步是什么 ？ (What’s next ?)

编码布局 (Code the layout)

As mentioned earlier I am going to require two things to bring the design to life.

如前所述，我将需要两件事来使设计栩栩如生。

• CSS Grid
  CSS网格
• CSS Flexbox
  CSS Flexbox

For CSS grid, there are some concepts that are required to be familiar with beforehand, so if you have not looked up Grids before, I urge you to take this tutorial or watch this. I’m going to mention some of the few concepts which I have used in this project:

对于CSS网格，需要事先熟悉一些概念，因此，如果您以前没有查阅Grids，我敦促您 阅读 本 教程 或观看 本 教程 。 我将提到在这个项目中使用的一些概念：

• grid-template-columns/grid-template-rows
  网格模板列/网格模板行

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. The fr unit allows you to set the size of a track as a fraction of the free space of the grid container.

用空格分隔的值列表定义网格的列和行。 这些值表示轨道大小，它们之间的间隔表示网格线。 fr单位允许您将轨道的大小设置为网格容器的可用空间的一部分。

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

• grid-template-areas
  网格模板区域

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells.

通过引用使用grid-area属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称会使内容跨越这些单元格。

.container {   
  grid-template-areas:      
    " | . | none | ..."     
    "...";  
}

• grid-area
  网格区域

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property.

给项目命名，以便可以通过使用grid-template-areas属性创建的模板引用该项目。

.item {   
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; 
}

Firstly, let’s setup the grid structure in HTML

首先，让我们在HTML中设置网格结构

<div class="grid-container">
  <div class="header">
    <div class="header1">Head1</div>
    <div class="header2">Head2</div>
    <div class="header3">Head3</div>
   </div>
  <div class="left_space">Left_Space</div>
  <div class="main">
    <div class="main1">Main1</div>
    <div class="main2">Main2</div>
    <div class="main3">Main3</div>
   </div>  
  <div class="right_space">Right_Space</div>
  <div class="footer">
    <div class="footer1">Footer1</div>
    <div class="footer2">Footer2</div>
    <div class="footer3">Footer3</div>
   </div>
</div>

Here the header section is divided into 3 parts i.e. three columns: header1, header2 and header3. Further the body section contains three rows: main1, main2 and main3 and two columns: left_space and right_space. left_space and right_space are just space fillers to force the focus to the center of the page. Footer section is divided into three columns: footer1, footer2 and footer3.

在此，标题部分分为3部分，即三列：header1，header2和header3。 此外，主体部分包含三行：main1，main2和main3，以及两列：left_space和right_space。 left_space和right_space只是用于将焦点强制到页面中心的空格。 页脚部分分为三列：页脚1，页脚2和页脚3。

Now it was time to bring in some CSS

现在是时候引入一些CSS了

• Header Section
  标头部分

.header{ 
  grid-area: header; 
  display:grid;
  grid-template-columns: 2fr 2fr 2fr 2fr;
  grid-template-areas:
  'header1 header2 header2 header3';
  grid-gap: 10px;
}
.header1{ grid-area:header1;}
.header2{ grid-area:header2; }
.header3{ grid-area:header3; }

• Body Section
  身体部分

.left_space{}
.main{ 
  grid-area: main;
  display:grid;
  grid-template-rows: 3fr 3fr 1fr;
  grid-template-areas:
  'main1'
  'main2'
  'main3';
  grid-gap: 10px;
}
.right_space{}
.main1{ grid-area:main1; }
.main2{ grid-area:main2; }
.main3{ grid-area:main3; }

• Footer Section
  页脚部分

.footer{ 
  grid-area: footer;
  display:grid;
  grid-template-columns: 9fr 1fr 1fr;
  grid-template-areas:
  'footer1 footer2 footer3';
  grid-gap: 10px;
}
.footer1 { grid-area: footer1; }
.footer2 { grid-area: footer2; }
.footer3 { grid-area: footer3; }

• Root grid-container
  根网格容器

.grid-container {
  display: grid;
  grid-template-rows: 1fr 6fr 1fr;
  grid-template-areas:
  'header header header header'
  'left_space main main right_space'
  'footer footer footer footer';
  grid-gap: 10px;
  padding: 10px;
  height:100vh;
  overflow: hidden; 
}

After the grid was built, it was time to work inside each cell of the grid along with the content positioning. This was the most fun part of the process. This is where CSS Flexbox came into picture.

构建网格之后，是时候在网格的每个单元中进行工作以及进行内容定位了。 这是该过程中最有趣的部分。 这就是CSS Flexbox出现的地方。

For CSS Flexbox, there are some concepts which are required to be familiar with beforehand, so if you have not looked up Flexbox before, I urge you to take this tutorial or watch this. I’m going to mention some of the few concepts which I have used in this project:

对于CSS Flexbox，需要事先熟悉一些概念，因此，如果您以前没有看过Flexbox，我强烈建议您 阅读 本 教程 或观看 本 教程 。 我将提到在这个项目中使用的一些概念：

• flex-direction
  弹性方向

This establishes the main-axis, thus defining the direction flex items are placed in the flex container.

这样便建立了主轴，从而确定了将柔韧性商品放置在柔韧性容器中的方向。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• justify-content
  证明内容

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

这定义了沿主轴的对齐方式。 当一行中的所有伸缩项目都不灵活或已达到最大大小时，它可以帮助分配剩余的剩余可用空间。 当项目溢出线时，它还对项目的对齐方式施加一些控制。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• align-items
  对齐项目

This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

这定义了弹性项目如何沿当前行的横轴布置的默认行为。 可以将其视为跨轴(垂直于主轴)的证明内容版本。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

As I have positioned the content elements using standard alignment techniques in the design, I was able to directly make use of Flexbox attributes “justify-content” and “align-items” to quickly position the elements exactly mimicking the design :)

当我在设计中使用标准对齐技术定位了内容元素时，我能够直接利用Flexbox属性“ justify-content”和“ align-items”来快速定位与设计完全相似的元素：)

This was similar to positioning elements according to x-axis and y-axis.

这类似于根据x轴和y轴定位元素。

Header Section

标头部分

<!-- HTML -->
<div class="header2">Alphonso</div>/* CSS */
.header2 { 
  grid-area: header2; 
  display: flex;
  justify-content: centre; //Vertical alignment
	align-items: centre; //Horizontal alignment
}

Body Section

身体部分

<!-- HTML -->
<div class="main1">
<h2>Enjoy</h2>
<h3>Luxury</h3>
</div><div class="main3">
<p>Contrary to popular belief, Lorem Ipsum... </p>
</div>/* CSS */
.main1 { 
  grid-area: header2; 
  display: flex;
 flex-direction: column;
  justify-content: flex-start; //Vertical alignment
 align-items: flex-end; //Horizontal alignment
 color: #fff;
 margin: 20px;
}.main3 {
 grid-area: main3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 20px;
}

So finally I got something like this,

所以最后我得到了这样的东西

Another advantage of combining Grids and Flexbox together is its flexibility to be responsive. With the help of media queries, it is quite easy to just change the structure of grid with respect to the size of the screen.

将Grids和Flexbox结合在一起的另一个优势是响应能力的灵活性。 在媒体查询的帮助下，相对于屏幕大小更改网格的结构非常容易。

This is not the only technique to use for developing landing pages but it is something that I figured out while going through the process myself. And like every other process this may also have some flaws but in the end, it worked out well for me. That’s why I decided to share my experience through this post.

这不是用于开发目标网页的唯一技术，而是我自己完成此过程时发现的技术。 像其他所有过程一样，这可能也有一些缺陷，但最后，对我来说效果很好。 这就是为什么我决定通过这篇文章分享我的经验的原因。

Thank you for giving it a read :)

谢谢您的阅读:)

完整代码可在我的GitHub上找到 (Full code available on my GitHub)