什么是HTML / CSS等效于XAML Grid [英] What's the HTML/CSS equivalent to XAML Grid

问题描述

我喜欢Grid的一件事是它会自动扩展以占用它所给予的整个空间（除非你限制它）。我找不到HTML / CSS中的等价物。我尝试过只使用div并使用flexbox和html网格，但是他们的所有大小都需要
像素或百分比。

One thing I like about Grid is that it automatically expands to take up the entire space it's given (unless you constrain it). I can't find the equivalent in HTML/CSS. I've tried using just div and using flexbox and html grid, but all of their sizing requires pixel or percentages.

我要做的是创建一个XAML边距为120,50,0,50的网格会自动计算其高度和宽度。使用HTML，我得到一个具有这些边距的0高度元素。如果我将元素设置为100％的高度，那么我将有一个
的盒子，它被偏移120,50，好像忽略了底部和右边距。

What' I'm looking to do is create a grid that has a XAML margin of 120,50,0,50 that automatically calculated it's height and width. Using HTML, I'd get a 0 height element that had those margins. If I set the element to 100% for height, then I'd have a box that is offset by 120,50 as if the bottom and right margins were ignored.

我希望我的布局尽可能灵活，以适应所有屏幕尺寸，但我想保持内容周围的固定边距。

I want my layout to be as flexible as possible to accommodate all screen sizes but I want to maintain the fixed margins around the content.

推荐答案

CSS网格允许您以像素，百分比或"分数"的形式指定行/列。后者将填补剩余空间。要使网格填满整个屏幕，但随后有你指定的边距，你可以按如下方式设置它，
其中 n fr是相对分数的语法：

The CSS grid allows you to specify rows/columns in terms of pixels, percentages, or "fractions" where the latter will fill in the remaining space. To have a grid that fills the whole screen, but then has the margins you indicate, you'd style it as follows, where nfr is the syntax for relative fractions:

#myDiv {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-rows: 50px 1fr 50px; /* 50px on top and bottom */
    -ms-grid-columns: 120px 1fr; /* 120px on left, 0 on right */
}

这篇关于什么是HTML / CSS等效于XAML Grid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！