Design
Here's the page we're going to implement
Before we start coding, we need to get into the grid thinking mode. The first step is to look at our design drafts and divide them into major grid components. Here are some of the divisions I've made for this design:
You will find that the entire page is divided into 7 top-level grid areas. The reason I say "top" is because we can continue to nest meshes within them, which is exactly what we're going to do with the hero section:
Html
This is the basic structure of HTML. I'll show the entire completed file later, but now I've omitted most of the details. The important part to note here is the body 7 elements of the direct descendants as:,,,, top-bar main-header hero blog-posts news , side-bar and main-footer . bodywill become our grid container (Grid container), and its child will become a grid item (grid items).
As we have just mentioned, we will also set hero as a grid container. It has two children, which will be as grid item: message and award .
<body>Css
Okey, we explain this way, we will not show all the CSS used in the tutorial, at the end of the article I will show the final complete file. Now we're just going to focus on the grid part that attracts us and any styles that are directly related to it.
We first
bodydefine the main grid container on:body{ Display:grid; grid-template-columns:12% Auto 400px 12%; Grid-template-rows:auto Auto 950px Auto Auto Auto;}We have just created a grid of 4 columns and 6 rows, and the first and last columns will be populated on both sides of the main content. I set the third column to 400px because this is where we are going
side-barto place the element, and we want this to be a fixed width.heroElement (third row) has a fixed height of 950px.Now we use
grid-template-areasto define where a grid area will go. This is a very interesting part:body{ Display:grid; grid-template-columns:12% Auto 400px 12%; Grid-template-rows:auto Auto 950px Auto Auto auto; Grid-template-areas: "Top-bar top-bar top-bar top-bar" "Main-header main-header Main-header Main-header " " hero hero hero Hero " ". Blog-posts side-bar . " ". News Side-bar . " " Main-footer main-footer main-footer main-footer "; }
grid-template-areasLet's put the element in any place we want to put it, and this property gives us a good visualization of the layout of the element. It is worth noting that the values used here (top-bar,,main-header, andheroso on) do not refer to the class names of those elements, but rathergrid-areato the names we give them with attributes, and we will name them next.When a grid region name repeats, the element spans these columns/rows. For example,
top-barspanning four columns,side-barspanning four rows and five elements. The.number represents an empty cell. If you look back at the complete design above, you will see how this definition matches our grid pattern.Let's say we've applied all of our styles, but we haven't assigned a grid range name for the grid item yet, so far our page doesn't look very good:
Before assigning grid range names to Grid items, the grid automatically places our elements in the grid based on their source order. Obviously that's not what we want. To make our layout work as expected, we need to define our grid area. So let's go down:
. top-bar{ Grid-area:top-bar;}. main-header{ Grid-area:main-header;}. hero{ Grid-area:hero;}. blog-posts{ grid-area:blog-posts;}. news{ grid-area:news;}. side-bar{ Grid-area:side-bar;}. main-footer{ Grid-area:main-footer;}It is important to note that these names can be set arbitrarily. For convenience, I chose to match them to the class name.
Now that we have assigned the grid area names to the grid items, they will be placed in the appropriate position in the grid. This step brings about a lot of change:
In addition to
herothe grid items in the section, everything is properly placed exactly as needed, and we're almost done.But before we fix it
hero, I want to explain some of the things that are hard to understand: the settings of the populated area on either side of the main content. As a reminder, we'll just move the setup again and adjust the columns as follows:body{ grid-template-columns:12% Auto 400px 12%;}Two columns set to 12% are used to fill the blanks on both sides of the main content, but they are used only for lines fourth and fifth. Recall that we tell our
top-bar,main-header,,heroandmain-footerelements to span all columns, including the two "fill" columns. Why do we do this? Because we want the background color of these elements to span the entire width of the window, and no one side is blank. We just want toblog-postnewssidebarleave a blank space around the/and elements (lines fourth and fifth).In order for the element to cover the entire width horizontally, while keeping the contents of the element in a certain padding, we need to display the padding on these elements:
. top-bar{ padding:4px 12%;}. main-header{ padding:12px 12%;}. hero{ padding:55px 12% 0 12%;}. main-footer{ padding:25px 12%;}We set the left and right padding for the element to 12%, which is the same as the width of the
grid-template-areasfirst column and the last column in the definition. Now, the final rendering of the element that needs to fill the entire width is that the background spans the horizontal width, but its contents are set aside 12% blank on both sides. Great location.Okay, let's fix this
heropart. This will also be a grid container, so we'll define it as a grid, as we've just done:. hero{ Display:grid; Grid-template-columns:auto 1FR Auto; Grid-template-rows:auto Auto Auto; Grid-template-areas: ". Award " " message: "" ... "; }This is a 3x3 grid, except for the middle column, the others are set to
auto. We set the middle column to the size1fr, because we want to fill the first and last columns with something, and the rest of the space needs to be completely filled.
heroThere are only two elements:messageandaward. We want tomessageoccupy the first column of the second row, we want toawardoccupy the third column of the first row. So our full grid definition should look like this:. hero{ Display:grid; Grid-template-columns:auto 1FR Auto; Grid-template-rows:auto Auto Auto; Grid-template-areas: ". Award " " message: "" ... "; }All we have to do is name our elements:
. message{ Grid-area:message;}. award{ Grid-area:award;}Just like that,
messageandawardsnap into place, our page finishes:Introducing the response type
CSS grids use media queries to make it easy to rearrange the entire layout. All you have to do is reposition your grid items. Now back to our design, for the sake of simplicity, we only respond to two width thresholds, 1600px and 1050px. We need to make some minor styling adjustments to some elements (padding, margin, etc.), but I'm not going to show all of the styling adjustments here. I'm going to release the entire code, and now we just need to focus on the grid-related stuff.
1600px this critical point of processing is relatively simple, when the browser width in the end of 1600px we will reduce the location of the external filling of the site. The reason for choosing 1600px is that the 12% padding after this width looks inappropriate. To solve this problem, what we need to do is change the value on the body
grid-template-columns, reducing the first and last columns to 2%. We also need to adjust the padding of other elements to match:@media (max-width:1600px) { body{ grid-template-columns:2% auto 400px 2; } . top-bar{ padding:4px 2%; } . main-header{ padding:12px 2%; } . hero{ padding:55px 2% 0 2; } . main-footer{ padding:25px 2%; }}For the next critical value, we rearrange the grid items so that they are arranged in a column. Look back again to see how our original code was set for the body:
body{ Display:grid; grid-template-columns:12% Auto 400px 12%; Grid-template-rows:auto Auto 950px Auto Auto auto; Grid-template-areas: "Top-bar top-bar top-bar top-bar" "Main-header main-header Main-header Main-header " " hero hero hero Hero " ". Blog-posts side-bar . " ". News Side-bar . " " Main-footer main-footer main-footer main-footer "; }The following is a re-set of media queries:
@media (max-width:1050px) { body{ grid-template-columns:3% Auto 3; Grid-template-rows:auto Auto Auto Auto Auto auto; Grid-template-areas: "Top-bar top-bar top-bar" " main-header main-header main-header" "Hero Hero Hero " ". Blog-posts . " ". News . " ". Side-bar . " " Main-footer main-footer main-footer "; }}We've made some important changes here: Reduce the number of columns from four to three, change the value of the first and last columns to 3% (3% is better than 2% on a narrower width), add additional rows, change the length of all rows,
autoandside-barmove to your own rows. Our page elements are now well suited to show at narrower widths:The Live Code
Here's our homepage, along with the full HTML and CSS files. You need a browser that supports grid to see the preview. I recommend enabling chrome 49+ for the experimental Web Platform Features flag (Address bar Enter chrome://flags and scroll down to "Experimental web Platform Features").
The following embedded page is displayed by default in Mobile view, and you can click "Edit on Codepen" to show different effects on the full width of the page:
In Codepen view effect Building a Home Page with a Grid by Chris House (@chrishouse).
Supplement: Basic Layout Code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
