This works in Google Chrome. I'm not yet sure of how to get this working in IE11. I know that one would lead the styles in the first div with display: -ms-grid; and that helps but nonetheless I still get funny results with a grid in Edge. I have not yet figured out that part.
<!DOCTYPE html>
<head>
<title>Whatever</title>
</head>
<body>
<div style="display: grid; grid-template-columns: 100px 150px; grid-gap: 30px;">
<div style="background-color: pink;">
yin
</div>
<div style="background-color: green; font-size: 40px;">
yang
</div>
</div>
</body>
</html>
Anyhow, the divs in the nested divs are not really important. All you really have to understand is that we are specifying two columns in the wrapping div's styles and that items nested inside, whatever they may be, will be jammed into a column format. Both columns are equally tall! The important stuff comes in the style tag of the first div. There are three styles doing three things:
- the first style says: "Yes, let's use a grid"
- the second style specifies two columns and the right column is 100 pixels wide while the left column in 150 pixels wide
- the third style puts a thirty pixel gap between the two columns
No comments:
Post a Comment