Перевод grid size: grid size | Перевод grid size?

Понимание CSS Grid (2 часть): Grid-линии / Хабр

Перевод Understanding CSS Grid: Grid Lines» Rachel Andrew

В первой статье из серии «Понимание CSS Grid» мы рассмотрели, как создавать родительский grid-контейнер и различные свойства, применяемые к данному элементу. Когда сетка создана, в нашем распоряжении оказывается набор grid-линий. В этой статье вы узнаете, как располагать элементы вдоль данных линий путём добавления свойств к дочерним элементам grid-контейнера.

Мы охватим следующие моменты:

1. Свойства размещения элементов grid-column-start, grid-column-end, grid-row-start, grid-row-end и их краткие формы записи grid-column and grid-row
2. Как использовать grid-area для размещения элементов по номерам grid-линий
3. Как располагать элементы с помощью именованных линий
4. Отличие в размещении элементов в явной и неявной сетке
5. Использование ключевого слова span с небольшим бонусом subgrid
6. Чего следует остерегаться при одновременном использовании ручного и автоматического размещения элементов

Статьи из данной серии:

• Часть 1: Создание Grid-контейнера
• Часть 2: Grid-линии
• Часть 3: Grid-области

Примечание от переводчика
В интернете очень много как статей, так и руководств о технологии CSS Grid. Но порой в материалах Rachel Andrew доступно освещаются те моменты, которым в других руководствах уделяется недостаточно внимания.

Следовательно, данную статью стоит воспринимать лишь как ещё одну точку зрения на уже хорошо известную технологию

Концепции позиционирования элементов по линиям

Чтобы разместить элемент на сетке, нужно задать линию, на которой он должен начинаться, и линию, на которой заканчиваться. Следовательно, если я хочу, чтобы на сетке, имеющей по 5 строк и колонок, элемент занимал вторую и третью колонки, а также с первой по третью строки, мне нужно использовать следующий CSS. Помните, что мы указываем не номер трека (колонки или строки), а номер линии, которые их разделают.

.item {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
}

То же самое можно было указать в сокращённом виде: число перед слешем – номер линии, с которой начинается элемент, после слеша – номер линии на которой элемент заканчивается.

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 4;
}

В следующем CodePen вы можете увидеть пример и попробовать изменить линии, которые охватывает элемент.

Обратите внимание, что наш элемент растягивается на всю определённую линиями область, потому что изначальные значения свойств выравнивания для элемента

align-self и justify-self равны stretch.

Если достаточно, чтобы элемент занимал только один трек (одну колонку или строку), номер линии завершения можно не указывать, поскольку по умолчанию браузер и так растянет элемент до следующей линии, заняв один трек. Мы видим такое поведение, когда автоматически располагаем элементы (как в первой статье из этой серии) – каждый элемент помещается в ячейку, которая по ширине равна одной колонке, а по высоте – одной строке. Таким образом, чтобы заставить элемент занять место между 2 и 3 линией, следует указать:

.item {
  grid-column: 2 / 3;
}

Но также вполне корректной будет запись, не содержащая линию, на которой элемент заканчивается:

. item {
  grid-column: 2;
}

Сокращённое свойство

"grid-area"

Располагать элементы можно и с помощью свойства grid-area. Указав в свойстве номера четырёх линий, можно тем самым определить область, занимаемую данным элементом. Более подробно мы разбёрем это свойство в следующей статье.

.item {
  grid-area: 1 / 2 / 4 / 4;
}

Последовательность номеров линий в данном свойстве определяет значения для следующих свойств: grid-row-start, grid-column-start, grid-row-end, grid-column-end. Для языков с горизонтальным направлением текста, записываемых слева направо (таких, как английский), это будет верх, лево, низ, право. Возможно, вы обратили внимание, что стороны указываются в обратном порядке по сравнению с тем, как мы привыкли записывать в CSS сокращения для таких свойств, как, например, margin.

Причина этого заключается в том, что Grid работает одинаково, независимо от того, какой установлен режим письма, и мы ещё вернёмся к этому чуть ниже.

Следовательно, установка сначала двух линий начала, а затем двух линий конца имеет больше смысла, чем сопоставление значений с физическими сторонам экрана. Я не склонна использовать это свойство при размещении элементов по линиям, так как считаю, что свойства с двумя значениями grid-column и grid-row более удобочитаемы при беглом просмотре файла стилей.

Линии явной сетки

В первой части упоминались явная и неявная grid-сетки. Явная – это сетка, которую вы создаёте с помощью свойств grid-template-columns и grid-template-rows. При объявлении колоночных и строковых треков вы также определяете и линии между этими треками.

Линии пронумерованы. Нумерация начинается с 1 для начального края как блочного, так и строчного направления. В горизонтальном режиме записи слева направо, линия 1 в блочном направлении будет вверху сетки, а линия 1 в строчном направлении – слева.

При работе с языком, имеющим горизонтальный режим записи справа налево (например, арабским), линия 1 в блочном направлении всё еще будет вверху, но линия 1 в строчном направлении уже будет справа, а не слева.

Если вы работаете с вертикальным режимом записи (на изображении ниже установлено свойство writing-mode: vertical-rl), линия 1 блочного направления будет справа. Линия 1 строчного направления – вверху.

Таким образом, grid-линии связаны с режимом и направлением записи, используемым в документе или компоненте.

Последняя линия явной сетки всегда имеет номер -1, а нумерация линий идёт в обратном порядке, задавая следующей с конца линии номер -2 и так далее. Это значит, что если вы хотите, чтобы элемент охватил все колонки явной сетки, достаточно задать:

.item {
  grid-column: 1 / -1;
}

Линии неявной сетки

Если вы создали треки неявной сетки, они также отсчитываются от 1. В примере ниже я создала явную сетку для колонок, однако, строковые треки были созданы в неявной сетке, которой я задаю высоту 5em с помощью свойства grid-auto-rows.

Элементу с классом placed задано свойство grid-row: 1 / -1, при котором он должен занять всё доступное место по вертикали, начиная с первой строковой линии 1 до последней строковой линии -1. Если бы для двух образовавшихся строк была задана явная сетка, то элемент и занимал обе строки. Но так как данные строковые треки были созданы в рамках неявной сетки, последней линией (которую мы обозначаем номером -1) стала линия 2, а не линия 3.

В настоящее время нет возможности указать последнюю строку неявной сетки, не зная заранее, сколько в этой сетке строк.

Размещение элементов по именованным линиям

В первой статье из этой серии упоминалось о том, что в дополнение к номерам, линиям сетки также можно задавать названия. Обёрнутые в квадратные скобки имена линий указываются между размерами треков.

.grid {
  display: grid;
  grid-template-columns: [full-start] 1fr [main-start] 2fr 2fr [main-end full-end];
}

Имена линий можно использовать вместо номеров при размещении элементов на сетке.

.item {
  grid-column: main-start / main-end;
}

Если линии присвоено несколько имён, при размещении элементов на сетке можно выбирать любое из них, все имена будут означать одну и ту же линию.

Примечание: Именование линий сопровождается некоторыми примечательными моментами. Более подробно это описано в статье «Именование в CSS Grid»

Одинаковые имена у разных линий

Вы получите весьма интересное поведение, если дадите нескольким линиям одинаковые имена. Данная ситуация может произойти, если линии именуются с помощью функции repeat(). В приведённом ниже примере дана сетка с 8 колонками, созданными путём 4-кратного повторения шаблна 1fr 2fr. Начальную линию маленького трека я назвала sm, а для большого трека – lg. Это значит, что у меня есть по 4 линии с каждым именем.

В этой ситуации мы можем использовать имя линии в качестве её порядкового номера. Таким образом, чтобы разместить элемент, начиная со второй линии с именем sm и растянуть до третьей линии с именем lg, я задаю свойство grid-column: sm 2 / lg 3. Если указать имя без порядкового номера, это всегда будет восприниматься как первая линия с таким именем.

Использование ключевого слова

"span"

Бывает, нужно, чтобы элемент занимал определённое количество треков (столбцов или строк), но при этом точно неизвестно или не важно, где именно он будет располагаться на сетке. Например, в ситуации, когда элементы располагаются на сетке автоматически, но вы хотите, чтобы они занимали несколько треков вместо одного, как предусмотрено по умолчанию. В этом случае вы можете использовать ключевое слово

span. В приведённом ниже примере элемент начинается с линии auto (это линия, на которую элемент будет помещён в результате автоматического размещения) и занимает 3 колонки.

.item {
  grid-column: auto / span 3;
}

Эта техника станет очень полезной, когда мы получим широкую поддержку технологии subgrid в виде соответствующего значения для свойств grid-template-columns и grid-template-rows. Например, в макете, состоящем из набора карточек, у каждой из которых есть область заголовка и область основного содержимого, может возникнуть потребность сделать эти области у всех карточек одинаковыми.

Каждая отдельная карточка будет использовать subgrid для своих строк (то есть, получать по две строки каждая). Результат можно увидеть в CodePen-примере ниже, если используете браузер Firefox или на изображении под ним.

Наслаивание элементов при размещении по линиям

При автоматическом позиционировании, CSS Grid помещает элементы сетки в пустые ячейки, а не в одну и ту же. Однако, вы всё же можете сделать это с помощью их размещения с указанием конкретных линий. В следующем примере изображение занимает два строковых трека, а подпись расположена во втором строковом треке и имеет полупрозрачный фон.

Элементы будут накладываться друг на друга в порядке, в котором они появляются в разметке документа. Таким образом, в примере выше подпись идёт после изображения и поэтому показывается над изображением. Если бы подпись шла первой, то находилась под изображениям и не была видна. Вы можете управлять наложением с помощью свойства z-index. Если для подписи важно идти первой в исходном коде, то можно использоватьz-index с бо́льшим значением, чем у изображения. Это заставит подпись отобразиться над картинкой, чтобы её можно было прочитать.

Смешивание автоматического и «линейного» позиционирования

Следует соблюдать осторожность, если вы одновременно используете автоматическое позиционирование элементов и их размещение по линиям сетки. Если используется только автоматическое размещение, это происходит последовательно – каждый элемент находит следующее доступное пустое пространство, в которое может поместиться.

Поведение по умолчанию всегда предусматривает продвижение вперёд, оставляя ячейку свободной, если элемент не помещается на сетке. Вы можете менять это поведение с помощью свойства grid-auto-flow со значением dense. В этом случае, если присутствует элемент, который равен оставшемуся в сетке свободному месту, он будет помещён туда вне очереди, чтобы заполнить свободное пространство. В приведённом ниже примере используется «плотное» размещение, элемент 3 теперь размещается перед элементом 2.

Обратите внимание, что это поведение может вызвать проблемы у пользователей, которые переключаются между элементами вдоль документа с помощью кнопки Tab, так как визуальный порядок элементов будет отличаться от их последовательности в исходном коде.

Также, работа автоматического позиционирования немного меняется, если какие-то из элементов уже были размещены разработчиком. Сначала будут размещены «вручную» спозиционированные элементы, а остальные будут последовательно занимать оставшееся свободное место.

Чтобы продемонстрировать это, я разместила элементы 1 и 2 с помощью линий сетки, оставив верхний ряд пустым. Последующие элементы оказались вверху, чтобы заполнить свободное пространство.

Стоит разобраться в принципах этого поведения, так как это может избежать ситуаций, в которых элементы будут оказываться в неожиданных для вас местах.

В заключение

Это почти всё, что вам нужно знать о линиях сетки. Помните, что вам всегда доступны пронумерованные линии. Независимо от того, как вы используете сетку, всегда можно переместить элемент с одной линии на другую. Методы, которые мы рассмотрим в следующих статьях, будут представлять альтернативные способы задания макета, но всё равно будут основаны на сетке, созданной с помощью пронумерованных линий.

On grid — Английский — Русский Переводы и примеры

On grid — Английский — Русский Переводы и примеры

Компьютерный перевод

Обучается переводу с помощью примеров, переведенных людьми.

English

Russian

Информация

English

on grid

Russian

 

От: Машинный перевод
Предложите лучший перевод
Качество:

Переводы пользователей

Добавлены профессиональными переводчиками и компаниями и на основе веб-страниц и открытых баз переводов.

Добавить перевод

Английский

Русский

Информация

Английский

then click on grid to trace polygon

Русский

Затем нажмите на сетку для построения полигона.

Последнее обновление: 2007-06-27
Частота использования: 1
Качество:

Английский

b based on grid squares with more than 1 ton of production.

Русский

b На основе квадратов с более 1 тонной производства.

Последнее обновление: 2016-12-04
Частота использования: 1
Качество:

Английский

another consideration on grid spacing is the overall size of the model.

Русский

Вторым фактором, определяющим размеры сетки, является общая площадь модели.

Последнее обновление: 2014-07-10
Частота использования: 1
Качество:

Английский

should electrification focus on off-grid or on-grid solutions?

Русский

Необходимо концентрироваться на развитии имеющейся сети или выстраивать новую?

Последнее обновление: 2016-02-24
Частота использования: 1
Качество:

Английский

technical studies are required to be conducted on grid stability and innovative storage mechanisms.

Русский

Необходимо провести технические исследования по вопросам стабильности энергосистем и создания инновационных накопительных механизмов.

Последнее обновление: 2016-12-04
Частота использования: 2
Качество:

Английский

horizontal air supply, product put on grids.

Русский

горизонтальная подача воздуха, расположение продукта на сетках.

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:

Английский

we choose to work on grid-level storage, not because it is easy, but because it is hard

Русский

Мы выбираем работу над накопителем для энергосистемы не потому, что это просто, а потому что это трудно

Последнее обновление: 2020-11-10
Частота использования: 1
Качество:

Английский

create enabling environment to boost local markets for renewables, both on-grid and off-grid.

Русский

Создание стимулирующих условий для увеличения присутствия возобновляемых источников энергии на местных рынках — сетевых и внесетевых.

Последнее обновление: 2017-01-02
Частота использования: 2
Качество:

Английский

33. it is usual to establish a distinction between on-grid re, off-grid re and ee projects.

Русский

33. Как правило, проводится различие между сетевыми и внесетевыми проектами ВЭ и проектами ЭЭ.

Последнее обновление: 2016-12-04
Частота использования: 1
Качество:

Английский

the telemedicine and advanced technology research center of the united states presented its work on grid technologies for biomedicine, which was involved with landscape epidemiology.

Русский

Научно-исследовательский центр по вопросам телемедицины и современных технологий Соединенных Штатов представил доклад о своей работе в области новых технологий вычислений в интересах геомедицины, связанных с ландшафтной эпидемиологией.

Последнее обновление: 2016-12-04
Частота использования: 1
Качество:

Английский

general exploration of the deposit was effected by drilling on grids of from 80 x 80 m to 160 x 480 m.

Русский

Предварительная разведка месторождения проведена горно-буровым способом при плотности сети от 80 x 80 м до 160 x 480 м.

Последнее обновление: 2017-01-02
Частота использования: 1
Качество:

Английский

to contribute to creating an enabling environment for the deployment of renewable energies in the unece region, both on-grid and off-grid;

Русский

Содействие созданию стимулирующей среды для использования возобновляемых источников энергии в регионе ЕЭК ООН как сетевых, так и внесетевых;

Последнее обновление: 2016-12-04
Частота использования: 1
Качество:

Английский

on grid and off grid power projects that use renewable energy as a primary energy source located adjacent to or on industrial or commercial sites primarily for use by businesses located at such sites, and companies that develop such projects ;

Русский

— проекты сетевых и внесетевых энергетических установок, использующих возобновляемую энергию в качестве первичного энергоисточника, расположенные на промышленных или коммерческих объектах или в непосредственной близости от них,, предназначенных прежде всего для использования коммерческими структурами, расположенными на таких объектах, а также компании, разрабатывающие проекты по созданию таких установок;

Последнее обновление: 2016-12-04
Частота использования: 1
Качество:

Английский

26. demographic statistical data were the first in the system of data sets to be disseminated on grids since they are the data most requested by users.

Русский

26. Первыми кандидатами для отображения на сетках стали данные демографической статистики, поскольку за подобными данными пользователи обращаются чаще всего.

Последнее обновление: 2016-12-04
Частота использования: 1
Качество:

Английский

(e) support electricity services based on grid extension and/or decentralized energy technologies, particularly in isolated areas, as appropriate;

Русский

e) поддерживать электроэнергоснабжение путем расширения сетей и/или применения технологий децентрализованного энергоснабжения, в частности в изолированных районах, где уместно;

Последнее обновление: 2016-12-03
Частота использования: 1
Качество:

Английский

4. preparing the databases applicable to grids was an important step, but there was still a need to exchange experience regarding the handling of statistical data on grids or geostatistics in general.

Русский

4. Хотя подготовка баз данных, пригодных для использования со статистическими сетками, и стала важным этапом, необходимо было также обменяться опытом работы с сеточными статистическими данными или имеющими географическую привязку данными в целом.

Последнее обновление: 2016-12-04
Частота использования: 1
Качество:

Английский

(g) to access existing mechanisms, or, in regions with no existing mechanism, to encourage the establishment of user-friendly, accurate and comprehensive regional data repositories as online databases on energy, and to conduct technical studies and gather information on grid stability and management, including maximizing the integration of renewable energy and innovative storage mechanisms;

Русский

g) доступ к существующим механизмам или, в регионах, где таких механизмов нет, стимулирование создания удобных для пользователя, точных и всеобъемлющих региональных центров хранения данных в качестве онлайновых баз данных по вопросам энергетики и проведение технических исследований и сбор информации по вопросам стабильности энергосистем и управления ими, включая максимальную интеграцию возобновляемых источников энергии и инновационных накопительных механизмов;

Последнее обновление: 2016-12-04
Частота использования: 5
Качество:

Добавить перевод

Получите качественный перевод благодаря усилиям

4,401,923,520 пользователей

Для Вашего удобства мы используем файлы cookie. Факт перехода на данный сайт подтверждает Ваше согласие на использование cookies. Подробнее. OK

определение размера сетки

| Словарь определений английского языка

  
      n  

1       См.     → gridiron

2    сеть горизонтальных и вертикальных линий, наложенных на карту, план здания и т. д., для определения точек  

3   решетка, состоящая из параллельных стержней  

4   ♦ сеть национальная сеть линий электропередач, трубопроводов и т. д., по которым распределяется электричество, газ или вода

5      (Новая Зеландия)      сокращенно от     → национальная сеть  

6      (также называется) управляющая сетка     (Электроника)   

а   электрод, расположенный между катодом и анодом клапана, обычно состоящий из цилиндрической сетки из проволок, который управляет потоком электронов между катодом и анодом   
    См. также     → сетка экрана     → решетка подавителя  

b    (как модификатор)  
смещение сетки     

7       См.     → стартовая сетка  

8    пластина в аккумуляторе с активным веществом  

9    любая система взаимосвязей  
автобусное сообщение образовало сетку по всей стране     
     (C19: обратное формирование из сетки)  
♦
♦   сетчатый      прил  

крупный рогатый скот
      n   сетка из металлических стержней, закрывающая выемку или яму, вырытую в проезжей части, предназначенная для предотвращения прохода скота при беспрепятственном проезде транспортных средств и т. п. )      другое название для     → сетка     → 6   в тетроде или пентоде   в тетроде или пентоде  

Смещение сетки
N Фиксированное напряжение, применяемое между контрольной сеткой и катодом клапана

Отклонение сетки
N .
      n   метод определения точки на карте или плане по номеру, относящемуся к линиям сетки, нанесенной на карту или план, и к подразделениям пространства между линиями  

отклонение сетки  
      n     (Навигация)   угол между севером сетки и магнитным севером в точке на карте или графике,   (также называется) grivation  

national grid  
      n  

1      (Brit)   a network of high-voltage power lines connecting major power stations  

2    a grid of metric coordinates used by the Ordnance Survey in Britain and Ireland and в Новой Зеландии Департаментом земель и геодезии Новой Зеландии и напечатаны на их картах  

экранная сетка  
      n     (Электроника)   электрод, расположенный между управляющей сеткой и анодом клапана и имеющий фиксированный положительный потенциал относительно сетки. Он действует как электростатический экран, предотвращая емкостную связь между сеткой и анодом, тем самым повышая стабильность устройства (иногда сокращается до) экран      См. также     → сетка глушителя  

стартовая решетка  
      n     (автогонки)   отмеченный участок трассы на старте, где автомобили выстраиваются в линию в соответствии с их временем на практике, самые быстрые занимают переднюю позицию  

глушительная решетка 9 0 0  90 электрод, помещенный между сеткой экрана и анодом клапана. Его отрицательный потенциал по отношению как к экрану, так и к аноду предотвращает попадание вторичных электронов с анода на экран

c# — Как перевести Grid, не зная размера окружающего контейнера

Задавать вопрос

спросил 7 лет, 4 месяца назад

Изменено 7 лет, 4 месяца назад

Просмотрено 32 раза

Я работаю над проектом Windows Phone 8. 1. Я пытаюсь выполнить анимацию моей сетки. Давайте сначала посмотрим код.

 <Страница
x:Class="CityBoxApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="использование:CityBoxApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
мк: игнорируемый = "д"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Фон сетки="#353C3F">
    
        <Определение строки/>
        <Определение строки/>
    
    <Сетка Grid.Row="0">
        
        <Сетка
          Вертикальное выравнивание = "Низ"
          Фон="#EC641A"/>
    
    
        
            <Панель стека>
                
                
            
        
    
 

 

Я просмотрел много всего в Google, но в основном проблема в том, что основная сетка всегда имеет размер в этих случаях.